ローディングアニメーションのCSS素材

いちばん基本のくるくるです。role="status" と見えない「読み込み中」の文字で、読み上げソフトにも伝わります。

終わりまでの時間が分からないときのバーです。ページの上やカードの上端に置けます。

1文字ずつ span で囲み、style="--i:0" の数字を順に増やすと、時間差で揺れます。

中身が届く前に、カードの形だけを灰色で見せておく表示です。読み込みが終わったら、この部分を本物のカードに入れ替えます。

小さな四角が斜めに順番に大きくなります。遅れの量は --d の数字で決めています。

色が濃い所から薄い所へなめらかに変わる輪が回ります。輪の太さは --cs-w で変えられます。

ページを開いた直後に全画面をおおい、読み込みが終わったら上へ開いて消えます。一瞬で消えるとちらつくので、最低でも MIN（ミリ秒）は表示します。body の直後に置いてください。

見本はCSSだけで0〜100%をくり返しています。実際の進み具合を出すときは、animation の行を消して、JSで el.style.setProperty('--cs-ld10-p', 45) のように数字を入れてください。数字が動く仕組みには @property を使っています。

押すとボタンの中にくるくるが出て、もう一度押せなくなります。見本では2秒後に元に戻ります。実際は送信が終わったところで is-busy を外してください。