目次
読み込み中や待機時間に最適な演出
ローディングスピナーは、処理中や通信中などの“待ち”時間にユーザーへ状況を伝える定番UIです。
CSSだけで実装すれば、外部画像やJavaScript不要で軽量なインジケーターが作れます。
HTML
|
1 2 3 |
<div class="spinner"></div> |
基本CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.spinner { width: 40px; height: 40px; border: 4px solid #ccc; border-top: 4px solid #333; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } |
応用：サイズやカラーをカスタマイズ
ローディングスピナーはプロジェクトごとにサイズや色を変更してブランド感を出すことも可能です。
|
1 2 3 4 5 6 7 |
.spinner.small { width: 20px; height: 20px; border-top: 4px solid red; } |
備考
borderの色や幅の組み合わせで回転感を演出しています。
