CSSローダージェネレーター（読み込み中）
テンプレートをタップして、色、サイズ、速度を調整し、コードをコピーしてください。すべてtransformとopacityだけを使うのでブラウザーにとって軽く、動きを抑えたい設定にも対応しています。
使い方CSSの読み込み中アニメーション
利用できる言語: 
広告
CSSローダージェネレーター（読み込み中）: 用途
7種類の読み込み中インジケーター（リング、二重リング、ドット、バー、パルス、プログレスバー、回転する四角）から選び、色、サイズ、時間を調整します。アニメーションはtransformとopacityだけを使います。
コードにはrole=status、スクリーンリーダー向けの隠しテキスト、システムで動きを減らす設定にしている人向けの遅いアニメーションが含まれます。
使い方
- ローダーのテンプレートを選びます。
- 色、サイズ、時間を調整します。
- HTMLとCSSをコピーします。
使うタイミング
- サイトやシステムの読み込み画面。
- 重い読み込み中のGIFの置き換え。
よくある質問
GIFではなくCSSを使うのはなぜですか？
CSSのローダーは数バイトしかなく、どんな画面でも鮮明で、変数1つで色が変わり、ブラウザーのメインスレッドの外で動くため、ページの読み込み中でも滑らかです。
ローダーはアクセシブルですか？
コードにはrole="status"と、スクリーンリーダー向けの隠しテキスト（読み込み中…）が含まれています。prefers-reduced-motionでは、動きを減らしたい人向けにアニメーションがかなり遅くなります。
ローダーはいつ表示すべきですか？
待ち時間がおよそ0.5秒を超えるときだけです。ごく短い待ち時間では、ローダーが点滅するとかえって邪魔になります。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。