ローディングスピナーは「処理中だよ」とユーザーに安心感を伝える UI
ローディングスピナーは、 「今、裏側で処理しているから少し待ってね」 という状態を視覚的に伝えるための UI パーツです。
CSSだけで実装する場合は、 border・animation・transform を組み合わせることで、 軽量で美しいスピナーを作れます。
ここでは CSS と Tailwind CSS の両方で、 初心者でも迷わないように、実務で使えるスピナーを丁寧に解説します。
スピナーの基本構造
円形の枠線（border）
一部だけ色を変える（border-top-color）
回転アニメーション（@keyframes spin）
animation: spin で永続回転
この4つを理解すると、どんなスピナーでも作れます。
例1：最も基本の「円がくるくる回るスピナー」
CSS 版
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e5e7eb;
border-top-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
<div class="spinner"></div>
Tailwind 版（CSSなしで完全再現）
<div
class="w-10 h-10 border-4 border-gray-300 border-t-sky-600 rounded-full
animate-spin">
</div>
深掘りポイント
スピナーは border の一部だけ色を変える のがコツ。 円全体を塗るのではなく、 「一部分だけ色がついた円を回す」ことでスピナーになります。
例2：細い線で軽量な「ミニマルスピナー」
CSS 版
.spinner-thin {
width: 32px;
height: 32px;
border: 3px solid #d1d5db;
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
<div class="spinner-thin"></div>
Tailwind 版
<div
class="w-8 h-8 border-2 border-gray-300 border-t-blue-500 rounded-full
animate-spin">
</div>
深掘りポイント
線を細くすると、 「軽くて上品なスピナー」になります。 フォーム送信や小さなボタンの中に入れるときに最適です。
例3：太い線で存在感のある「強調スピナー」
CSS 版
.spinner-bold {
width: 48px;
height: 48px;
border: 6px solid #e2e8f0;
border-top-color: #22c55e;
border-radius: 50%;
animation: spin 0.9s ease-in-out infinite;
}
<div class="spinner-bold"></div>
Tailwind 版
<div
class="w-12 h-12 border-4 border-gray-200 border-t-emerald-500 rounded-full
animate-spin">
</div>
深掘りポイント
太い線は「処理中です！」という強い存在感を出せます。 ページ全体のローディングに向いています。
例4：二重円の「ダブルスピナー」
CSS 版
.spinner-double {
width: 40px;
height: 40px;
border: 4px solid transparent;
border-top-color: #2563eb;
border-bottom-color: #2563eb;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
<div class="spinner-double"></div>
Tailwind 版
<div
class="w-10 h-10 border-4 border-transparent border-t-sky-600 border-b-sky-600
rounded-full animate-spin">
</div>
深掘りポイント
上下だけ色をつけることで、 「二重の円が回っている」ように見えるスピナーになります。 少しリッチな印象を出したいときに便利。
例5：点が回る「ドットスピナー」
CSS 版
.spinner-dots {
width: 40px;
height: 40px;
position: relative;
}
.spinner-dots div {
width: 8px;
height: 8px;
background: #2563eb;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform-origin: -12px -12px;
animation: spin 1s linear infinite;
}
<div class="spinner-dots">
<div></div>
</div>
Tailwind 版（任意値）
<div class="relative w-10 h-10">
<div
class="absolute top-1/2 left-1/2 w-2 h-2 bg-sky-600 rounded-full
origin-[ -12px_-12px ] animate-spin">
</div>
</div>
深掘りポイント
点が回るスピナーは軽量で可愛い印象。 チャットアプリやミニ UI に向いています。
スピナーをボタン内に入れる（実務でよく使う）
CSS 版
.btn {
position: relative;
padding: 0.6rem 1.2rem;
background: #2563eb;
color: #fff;
border-radius: 8px;
}
.btn .spinner {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
}
<button class="btn">
送信中…
<div class="spinner"></div>
</button>
Tailwind 版
<button class="relative px-4 py-2 bg-sky-600 text-white rounded">
送信中…
<div
class="absolute right-3 top-1/2 -translate-y-1/2
w-4 h-4 border-2 border-white/40 border-t-white rounded-full
animate-spin">
</div>
</button>
深掘りポイント
ボタン内にスピナーを入れると、 「このボタンが今処理中だよ」ということが明確になります。
スピナー設計の重要ポイント
回転速度は 0.7〜1.0 秒が最適
速すぎると落ち着かない 遅すぎると処理が重く見える
border の太さで印象が変わる
細い → 上品・軽量 太い → 強調・存在感
色はブランドカラーに合わせる
背景が暗いなら明るい色 背景が明るいなら濃い色
Tailwind の animate-spin は非常に便利
CSSの @keyframes spin と同じ動きを簡単に使えます。
そのまま使える「万能ローディングスピナー」（Tailwind）
<div
class="w-10 h-10 border-4 border-gray-300 border-t-sky-600 rounded-full
animate-spin">
</div>
軽量・高品質で、 どんな UI にも使える万能スピナーです。
さいごに
ローディングスピナーは、 「待ち時間をストレスにしない」 UI パーツです。
border・animation・transform の組み合わせを理解すると、 CSSだけで美しいスピナーが簡単に作れます。
もしあなたが作っている UI（フォーム送信、ページ読み込み、API待ちなど）があれば、 その画面に合わせた最適なスピナーを一緒に設計できます。
