スピナー・ドット・バーなど、読み込み中を表すアニメーションをCSSだけで生成します。画像やライブラリを使わずに設置できます。
仕組み
枠線の1辺だけ色を変えて回転させる方法が、もっとも軽量なスピナーの実装です。要素1つで作れるため、HTMLを汚しません。
@keyframes spin { to { transform: rotate(360deg); } }
.loader {
width: 32px; height: 32px;
border: 3px solid #eee;
border-top-color: #2fa35a;
border-radius: 50%;
animation: spin .8s linear infinite;
}ローディング表示の使い分け
| 待ち時間 | 適した表示 |
|---|---|
| 1秒未満 | 何も出さない（かえって画面がちらつきます） |
| 1〜3秒 | スピナー・ドット |
| 3秒以上 | 進捗バー、または処理内容の説明 |
| ページの骨組みが決まっている場合 | スケルトン表示（枠だけ先に出す） |
アクセシビリティ
- 読み込み中であることを支援技術へ伝えるため、aria-busy や role="status" を併用します
- prefers-reduced-motion が指定されている環境では、動きを抑える配慮が推奨されます
- 画面全体を覆う場合は、操作できないことが分かる見た目にします
よくある質問
Q 画像やライブラリは必要ですか？
不要です。CSSのアニメーションだけで動作します。
Q 動きを止める配慮は必要ですか？
@media (prefers-reduced-motion: reduce) で、動きを抑えた表示に切り替える配慮が推奨されます。
Q いつ表示すべきですか？
1秒未満で終わる処理では、表示しないほうが画面のちらつきを防げます。
Q 色は変えられますか？
生成されたCSSの色指定を書き換えるだけで変更できます。