CRAZY Code ─ 奇抜ローディング｜コピペで使える動きのサンプル

S-001物理砂時計CRAZY度 ★★★★

約1000粒の砂を1粒ずつ計算して落とす砂時計です。進み具合の分だけ首から砂が落ち、完了するとくるりと返ります。叩くと砂が跳ねます。

Canvas 2DセルオートマトンWeb Animations進み具合API

これは何？

砂粒を1粒ずつ計算して落とす砂時計のローダーです。渡した進み具合の分だけ首から砂が落ち、完了すると砂時計がくるりと返って、次の読み込みに備えます。上の砂は真ん中からすり鉢状に減り、下には山ができます。

使い方

「全部コピー」して貼り付けます。
data-demo を消すと、自動では進まなくなります。読み込みの進み具合に合わせて el.ugLoad.set(0.4)（0〜1）を呼び、終わったら el.ugLoad.done() を呼びます。el は document.querySelector('.ug-hglass') で取れます。
砂時計が返り終わると、要素に ugloaddone イベントが届きます。もう一度使うときは el.ugLoad.reset() を呼びます。
クリック（キーボードではEnterかスペース）で砂時計を叩くと、砂が跳ねます。

カスタマイズ

砂の色は SAND の3色です。横じまに積んであるので、流れ方が見えます。
形は内側の半幅の表 HW で決まります。首から上の傾きの上限 .85 を大きくすると、砂が壁に残るので注意してください。
渡した値に砂が遅れているときは、loop() の extra で計算を増やして追いつかせています。

注意

60×100マスの格子で砂を動かし、砂が止まっている間は描き直しを止めます。残り時間は渡された値の増え方から見積もった目安で、値が届かないまま2.6秒たつと「少し時間がかかっています」に変わります。

S-002沸騰フラスコCRAZY度 ★★★★

進むほど液面が上がり、火が強まって泡が増え、栓が震えだします。完了すると栓が飛んで、液の色が変わります。

Canvas 2D波の方程式パーティクル

これは何？

進み具合に合わせて液面が上がり、バーナーの火が強まって泡が増えていくフラスコです。温度の表示も20℃から100℃へ上がります。熱くなると栓の脇から湯気が漏れて栓が震え、完了すると栓が飛んで液が黄緑に変わります。

使い方

「全部コピー」して貼り付けます。
data-demo を消し、進み具合を el.ugLoad.set(0.4)（0〜1）で渡します。終わったら el.ugLoad.done()、もう一度使うときは el.ugLoad.reset() です。
栓が飛んだあと、要素に ugloaddone イベントが届きます。
クリック（Enterかスペース）でフラスコを揺らせます。

カスタマイズ

液の色は COLD（冷たいとき）・HOT（熱いとき）・DONE（完了）で、色相・彩度・明度の順に書きます。色相は途中の色が濁らないよう、360を足した値で回しています。
泡の量は update() の 60（1秒あたりの最大数）です。

注意

液面の揺れは40本の柱を波の方程式で動かしています。泡と湯気はフラスコの中と口のまわりにだけ出ます。

S-003言い訳するプログレスバーCRAZY度 ★★★★★

最初だけ速く進んで99%で粘り、戻ったり枠からはみ出したりしながら言い訳します。本当の値は下に小さく出ています。

ばねの数値計算CSS animationWeb Audio

これは何？

本当の値より先回りして進み、99%で止まって粘るプログレスバーです。ときどき急に戻ったり、枠を突き破って120%まで伸びたり、数字が化けたりして、そのたびに吹き出しで言い訳をします。done() を呼ぶと、そこで初めて本当に100%まで進みます。

使い方

「全部コピー」して貼り付けます。
data-demo を消し、本当の進み具合を el.ugLoad.set(0.4)（0〜1）で渡します。終わったら el.ugLoad.done()、もう一度使うときは el.ugLoad.reset() です。
下の「実際の進み具合」には本当の値が出ます。読み上げソフト向けの aria-valuenow にも本当の値を入れています。

カスタマイズ

言い訳の文は SAY、嘘をつく間隔は R(1800, 3600)（ミリ秒）です。
先回りの強さは loop() の 2.6 です。1にすると本当の値どおりに進みます。

注意

長く待たせる処理だと、ふざけた表示がかえって腹立たしくなります。数秒で終わる処理や、遊びのあるサイトに向いています。「実際の進み具合」は消してもかまいませんが、残しておくと親切です。

S-004回りすぎるスピナーCRAZY度 ★★★★

待たせるほど回転が上がり、赤く焼けて火花を散らし、軸までぶれ始めます。ドラッグで掴んで止めたり、回して勢いをつけたりできます。

Canvas 2DモーションブラーPointer Events

これは何？

進み具合が届かない時間が長いほど焦って速く回るスピナーです。速くなると残像が伸び、黄緑から橙、赤、白へと焼けて火花を散らし、軸もぶれ始めます。外側の輪は進み具合です。完了すると急停止して、チェックの印に変わります。

使い方

「全部コピー」して貼り付けます。
data-demo を消し、el.ugLoad.set(0.4)（0〜1）で進み具合を渡します。set() を呼ぶたびに焦りがおさまります。終わったら el.ugLoad.done()、もう一度使うときは el.ugLoad.reset() です。
ドラッグで掴むと止まり、回して離すと勢いがつきます。キーボードでは左右の矢印キーで回せます。

カスタマイズ

焦り方は loop() の 3 + 4 * Math.pow(idle, 1.25) です（idle は最後に set() されてからの秒数）。
焼けたときの色は STOPS、文言は talk() です。

注意

進み具合が分からない処理なら、set() を呼ばずに放っておけば、時間とともにどんどん焦ります。速く回すほど1コマに何度も描くので、少し重くなります。

S-005打ち上げ導火線CRAZY度 ★★★★★

火花が導火線を燃え進み、完了するとロケット花火が上がって、夜空に「完了」の字が開きます。なぞると導火線を引き直せます。

Canvas 2Dパーティクル文字の点群

これは何？

進み具合の分だけ導火線が燃え進むローダーです。完了すると火が一気に走ってロケット花火に点火し、打ち上がった花火の火の粉が夜空で「完了」の字に集まります。

使い方

「全部コピー」して貼り付けます。
data-demo を消し、el.ugLoad.set(0.4)（0〜1）で進み具合を渡します。終わったら el.ugLoad.done()、もう一度使うときは el.ugLoad.reset() です。
花火が開いたところで、要素に ugloaddone イベントが届きます。
舞台をなぞると、その線が新しい導火線になります（燃えた割合はそのまま）。軽く叩くと火花が強まります。

カスタマイズ

花火の字は burst() の '完了'、字の色は同じ所の '#DFFF3E' と '#FFF4C2'、まわりに散る火の粉の色は COLORS です。
導火線の最初の形は defPath()、ロケットの位置は RX・GY（舞台の幅と高さに対する割合）です。

注意

スマホで縦になぞるとページのスクロールになります。花火の字は端末の太字ゴシックで描くので、字形は端末ごとに少し変わります。

S-006組み上がる歯車CRAZY度 ★★★★

進むたびに歯車が1枚ずつ落ちてきて噛み合います。全部そろうと一気に回り、「完了」の判を押して止まります。噛み合った歯車は掴んで回せます。

Canvas 2DPath2D歯数比の連動Web Audio

これは何？

進み具合に合わせて歯車が1枚ずつ落ちてきて噛み合い、左のモーターから右端まで動力がつながっていくローダーです。全部そろうと一気に回り、「完了」の判をドンと押して止まります。

使い方

「全部コピー」して貼り付けます。
data-demo を消し、el.ugLoad.set(0.4)（0〜1）で進み具合を渡します。終わったら el.ugLoad.done()、もう一度使うときは el.ugLoad.reset() です。
判を押したあと、要素に ugloaddone イベントが届きます。
噛み合った歯車はドラッグで回せます。どれを回しても、全部が歯数の比のとおりに連動します。キーボードでは左右の矢印キーで回せます。

カスタマイズ

歯数は TEETH、次の歯車をつなぐ向きは TURN（ラジアン）、色は FILL です。数を変えるときは3つの長さをそろえてください。
判の文字は stampArt() の '完了' です。

注意

判を押す瞬間、親要素に data-ug-shake があればそこを、なければ歯車の枠を揺らします。スマホで縦になぞるとページのスクロールになります。