シンプルなローディングスピナー

解説

このローディングスピナーは、円い枠線の一部だけを別色にして回し続けるという、もっともシンプルな読み込み表示です。仕掛けは正方形に border:4px solid で灰色の枠を付け、border-top-color だけアクセント色に変えること。そこへ border-radius:50% で正円にすると、色の付いた上辺だけが目立つ円ができます。あとは @keyframes spin で transform:rotate(360deg) を linear で無限ループさせれば、色の点が滑らかに回り続けます。画像も SVG も使わず、要素ひとつと数行の CSS だけで完結するため非常に軽量です。JavaScript も不要です。

使う場面

• データ取得やフォーム送信中の待ち時間表示
• ボタン内や画面中央に置く汎用のローディングインジケータ
• SVG ライブラリを増やしたくない軽量なサイト

大きさは width／height、線の太さは border の幅、回転の速さは animation の秒数（既定 .9s）で自由に変えられます。色はベースの灰色と border-top-color の組み合わせで決まります。注意点として、回り続けるアニメは prefers-reduced-motion を尊重し、動きを抑えたい利用者には控えめな代替表示を用意できると親切です。

使用例・適したシーン

• データ取得中の表示
• 送信ボタンクリック後のフィードバック
• 画像読み込み待ち