CSSローダーの作り方｜回転スピナー・ドット・バー・パルスの基礎とUX配慮

Webページやアプリでデータの読み込みを待つあいだ、くるくる回る小さなアニメーションを見たことがあるはずです。これがCSSローダー（スピナー）です。画像を一切使わず、CSSだけで軽量に作れるうえ、表示があるだけで「ちゃんと動いている」という安心感をユーザーに与えられます。本記事では、もっとも基本的な回転スピナーの作り方から、ドット・バー・パルスといったバリエーション、そして動きが苦手な人にも配慮するアクセシビリティの工夫までを順に解説します。

CSSローダーとは何か

CSSローダーとは、処理や通信の完了を待っているあいだ、ユーザーに「いま読み込み中です」と視覚的に伝えるためのアニメーションです。回転する円形のスピナーがもっとも有名ですが、点が順番に光るドット型、棒が伸び縮みするバー型、ふわっと拡大縮小するパルス型など、形はさまざまです。

CSSローダーの大きな利点は、画像やJavaScriptを使わずにCSSだけで完結できる点にあります。GIF画像のように容量を取らず、拡大しても輪郭がぼやけず、色やサイズもCSSの数値を変えるだけで自由に調整できます。読み込みが遅い環境でもローダー自体は軽く描画されるため、「待たされている」というストレスを和らげる役割を果たします。

まずは実際にどんな動きになるのかを、CSSローダー生成ツールでいくつか切り替えて眺めてみると、これから説明する仕組みのイメージがつかみやすくなります。形や速度を変えながら、生成されるコードと見た目の対応を確認してみてください。

基本：borderとborder-radiusで作る回転スピナー

もっとも定番の円形スピナーは、たった一つの要素と数行のCSSで作れます。仕組みはシンプルで、正方形の要素にborder-radiusで丸みを与えて円にし、四辺の枠線のうち一辺だけ色を変えるという発想です。

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

ポイントを順に見ていきましょう。

• width / height を同じ値にする：正方形にすることで、後のborder-radiusで真円になります。
• border で太さと薄い色の枠を全周に引く：これが回転する円の「土台（トラック）」になります。
• border-top-color だけ濃い色にする：一辺だけ色を変えることで、回転していることが分かる目印（インジケーター）になります。
• border-radius: 50% で円にする：四角形の枠線が円弧に変わり、リング状の見た目になります。

この時点ではまだ静止画です。色の違う一辺を持つリングができただけで、回転はしていません。動かすのは次に説明する@keyframesの役割です。色やサイズを変えたいときは、CSSローダー生成ツールでスライダーを動かしながら数値の効果を確かめると理解が早まります。

@keyframesで回転させる仕組み

静止したリングを回すには、CSSアニメーションの中心である@keyframesを使います。@keyframesは「アニメーションの開始から終了までに、要素のスタイルをどう変化させるか」を定義する仕組みです。スピナーの場合は、要素を一回転させるだけのシンプルな定義で済みます。

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

from（0%）の時点では回転なし、to（100%）の時点で360度回転、という指定です。あいだの角度はブラウザが自動的に補間してくれるため、なめらかに一回転します。この@keyframesを要素に結びつけているのが、先ほどのanimationプロパティです。

• spin：再生する@keyframesの名前。
• 1s：一回転にかかる時間。短くすると速く、長くするとゆっくり回ります。
• linear：速度の変化のしかた。回転を一定速度にしたい場合はlinearが自然です。
• infinite：何回繰り返すか。読み込み中はずっと回り続けてほしいのでinfinite（無限）にします。

回転スピナーで覚えておきたいのは、動きは必ずtransform: rotate()で表現することです。transformはレイアウトの再計算を伴わずに描画できるため、marginや位置プロパティを動かすよりも滑らかで負荷が軽くなります。@keyframesの組み立て方をもっと細かく試したいときは、CSSキーフレーム生成ツールで各段階のスタイルを編集しながら出力を確認すると、補間のイメージがつかめます。

ドット・バー・パルス系の作り方

回転スピナー以外にも、定番のローダーがいくつかあります。考え方さえ分かれば、いずれも@keyframesの応用で作れます。

1. ドット型（点が順番に光る）

小さな円を3つ並べ、それぞれに同じ「拡大・縮小」または「透明度の変化」のアニメーションを与えます。ポイントはanimation-delayで開始タイミングをずらすことです。1つ目は0秒、2つ目は0.2秒、3つ目は0.4秒遅らせると、点が波打つように次々と光って見えます。

2. バー型（棒が伸び縮みする）

細い縦棒を複数並べ、transform: scaleY()で高さ方向に伸縮させます。ドット型と同じようにanimation-delayをずらすと、イコライザーのように波打つ動きになります。scaleYを使うことで、こちらもレイアウトを再計算せずに滑らかに動かせます。

3. パルス型（ふわっと拡大縮小する）

1つの円をtransform: scale()で大きくしながら、同時にopacityを下げて消えていくように見せる方式です。心臓の鼓動のように「拡大して薄くなる」を繰り返すことで、静かに存在を主張するローダーになります。

これらはどれも、「複数要素＋遅延」か「拡大縮小＋透明度」という共通パターンの組み合わせです。手で書く前に、CSSローダー生成ツールで各タイプを切り替えて、生成されるコードの違いを見比べると、どの値が何を担っているのかが直感的に理解できます。

prefers-reduced-motionで動きに配慮する

くるくると回り続けるアニメーションは便利な反面、動きの強い表現が苦手な人や、めまい・乗り物酔いに近い症状（前庭障害）を持つ人にとっては負担になることがあります。そこで活用したいのが、OSの「視差効果を減らす」「アニメーションを減らす」といった設定を検知できるメディアクエリprefers-reduced-motionです。

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

この指定により、ユーザーが「動きを減らす」設定をしている場合だけ、回転アニメーションを止められます。ただ完全に消すと「読み込み中」が伝わらなくなるため、アニメーションを止めるかわりに、静的なリングや「読み込み中…」というテキストを表示するとより親切です。

• 動きを止めるだけでなく代替を用意する：静止した円や進捗テキストで、状態を伝え続けます。
• 支援技術にも状態を伝える：ローダーの要素にrole="status"やaria-label="読み込み中"を付けると、画面読み上げソフトを使う人にも状況が伝わります。

アクセシビリティ対応は「特別な誰かのため」ではなく、結果的にすべての人にとって分かりやすいUIにつながります。@keyframesを編集する段階で動きの強さを抑えめに調整しておくのも有効で、CSSキーフレーム生成ツールで変化幅を小さくしたバージョンを用意しておくと、reduced-motion時の代替としても流用しやすくなります。

表示タイミング：いつローダーを出すか

ローダーは「とりあえず出せばよい」ものではありません。出し方とタイミングを誤ると、かえって遅く感じさせてしまうこともあります。最後に、UXの観点で気をつけたいポイントを整理します。

とくに気をつけたいのが「一瞬だけ表示されるローダー」です。処理が数十ミリ秒で終わるのにローダーを出すと、画面がチカッと点滅するだけになり、かえって不安定な印象を与えます。これを防ぐには、「読み込みが一定時間（たとえば300ミリ秒）を超えたら初めて表示する」という遅延表示の工夫が有効です。

また、待ち時間が長い場合は、回り続けるだけのスピナーよりも進捗率や処理の段階を見せるほうが安心感が高まります。「あと少し」が分かるだけで、体感的な待ち時間は大きく縮みます。読み込みの内容に応じて、コンテンツの枠だけを先に表示しておく「スケルトンスクリーン」を併用するのも効果的です。

CSSローダーは、borderとborder-radiusで作った円を@keyframesで回す、という基礎さえ押さえれば、ドット・バー・パルスへと自在に応用できます。まずはCSSローダー生成ツールで好みの形を見つけ、必要に応じてCSSキーフレーム生成ツールで動きを微調整してみてください。手を動かして仕組みを目で確かめることが、理解への近道です。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの挙動、アクセシビリティのガイドラインは更新されることがあるため、実装の際は最新の公式ドキュメントを確認したうえで判断してください。