本文へスキップ
  1. Web BENTO CSS
  2. カテゴリ一覧
  3. ローディング
10 / LOADING 12 パーツ

CSSローディングアニメーション 12選

コピペで使えるCSSローディングのサンプル集。スピナー・スケルトン・プログレスバーなど、全デモが実際に動いています。シャッフルで色やサイズのバリエーションを試せて、CSSタブには動きに必要な @keyframes まで含まれているので、貼り付けるだけで完動します。クラス名は .bnto-load-spinner 形式です。

該当するパーツが見つかりませんでした。

スピナー

.bnto-load-spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(0,0,0,.1);
  border-top-color: hsl(187 63% 46%);
  border-radius: 50%;
  animation: bnto-spin .8s linear infinite;
}
@keyframes bnto-spin { to { transform: rotate(360deg); } }
使い方のコツ

最も定番のローダー。回転の速さは .8s の数値で調整します。border の色が「レール」、border-top-color が回って見える部分です。読み込みが終わったら要素ごと削除しましょう。

ドット

.bnto-load-dots { display: flex; gap: 9px; }
.bnto-load-dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: hsl(5 100% 65%);
  animation: bnto-dot 1.2s ease-in-out infinite;
}
.bnto-load-dots span:nth-child(2) { animation-delay: .15s; }
.bnto-load-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bnto-dot {
  0%,100% { transform: scale(.6); opacity: .3; }
  50%     { transform: scale(1); opacity: 1; }
}
使い方のコツ

同じアニメを animation-delay で少しずつ遅らせるのがポイント。点を増やすときは span を足して :nth-child(4) に .45s のように等間隔の遅延を付けます。

パルス

.bnto-load-pulse {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: hsl(119 31% 51%);
  animation: bnto-pulse 1.3s ease-in-out infinite;
}
@keyframes bnto-pulse {
  0%,100% { transform: scale(.6); opacity: .5; }
  50%     { transform: scale(1);  opacity: 1; }
}
使い方のコツ

鼓動のようにふくらむ円。ease-in-out をそのまま使うと呼吸感が出ます。border-radius: 50% を外せば四角のパルスにも応用できます。

プログレスバー（不確定）

.bnto-load-bar {
  width: 150px; height: 9px; border-radius: 9px;
  background: rgba(0,0,0,.1);
  overflow: hidden; position: relative;
}
.bnto-load-bar::after {
  content: ""; position: absolute; top: 0; left: -40%;
  height: 100%; width: 40%; border-radius: 9px;
  background: hsl(41 100% 50%);
  animation: bnto-slide 1.3s ease-in-out infinite;
}
@keyframes bnto-slide { 0% { left: -40%; } 100% { left: 100%; } }
使い方のコツ

残り時間が分からない処理向けの「不確定」バー。width: 100% にすればページ上部に貼り付けるトップバーとしても使えます。進捗率が分かる処理には <progress> 要素の利用も検討を。

スケルトンスクリーン

.bnto-load-skeleton { display: flex; gap: 12px; width: 200px; }
.bnto-load-skeleton .av { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.bnto-load-skeleton .tx { flex: 1; }
.bnto-load-skeleton .ln { height: 12px; border-radius: 6px; margin-bottom: 9px; }
.bnto-load-skeleton .ln:last-child { width: 60%; margin-bottom: 0; }
.bnto-load-skeleton .av, .bnto-load-skeleton .ln {
  background: linear-gradient(90deg,
    #e8e2d6 25%, #f7f2e9 50%, #e8e2d6 75%);
  background-size: 200% 100%;
  animation: bnto-shimmer 1.4s linear infinite;
}
@keyframes bnto-shimmer { to { background-position: -200% 0; } }
使い方のコツ

実際のコンテンツ（アバター＋テキスト2行）と同じ形・同じサイズで組むのがコツ。表示後のガタつき（レイアウトシフト）を防げます。.ln の幅や数を実レイアウトに合わせて増減してください。

デュアルリング

.bnto-load-ring {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: hsl(327 53% 54%);
  border-bottom-color: hsl(327 53% 54%);
  animation: bnto-spin .9s linear infinite;
}
@keyframes bnto-spin { to { transform: rotate(360deg); } }
使い方のコツ

上下2辺だけに色を付けたリング。border-left-color も足すと3点リングになり、色を付ける辺の数で密度を調整できます。スピナーより軽やかな印象です。

バウンスボール

.bnto-load-bounce { display: flex; gap: 10px; }
.bnto-load-bounce span {
  width: 14px; height: 14px; border-radius: 50%;
  background: hsl(202 73% 56%);
  animation: bnto-bounce 1s ease-in-out infinite;
}
.bnto-load-bounce span:nth-child(2) { animation-delay: .12s; }
.bnto-load-bounce span:nth-child(3) { animation-delay: .24s; }
@keyframes bnto-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
使い方のコツ

跳ね上がる高さは translateY(-12px) で調整。上に跳ねるぶんの余白を確保しておくと、周囲のレイアウトを押し広げずに済みます。チャットの「入力中…」表示にもよく使われます。

イコライザー

.bnto-load-equalizer { display: flex; gap: 5px; align-items: center; }
.bnto-load-equalizer span {
  width: 6px; height: 30px; border-radius: 3px;
  background: hsl(150 58% 44%);
  animation: bnto-grow 1s ease-in-out infinite;
}
.bnto-load-equalizer span:nth-child(2) { animation-delay: .2s; }
.bnto-load-equalizer span:nth-child(3) { animation-delay: .4s; }
.bnto-load-equalizer span:nth-child(4) { animation-delay: .6s; }
@keyframes bnto-grow {
  0%,40%,100% { transform: scaleY(.4); }
  20%         { transform: scaleY(1); }
}
使い方のコツ

height ではなく transform: scaleY() で伸縮させているので描画負荷が軽いのが特長。音声・動画系のUIや、再生中インジケーターにもそのまま流用できます。

円形プログレス

.bnto-load-conic {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, hsl(258 47% 56%));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: bnto-spin 1s linear infinite;
}
@keyframes bnto-spin { to { transform: rotate(360deg); } }
使い方のコツ

conic-gradient で「尻尾が薄くなる」表現ができる今どきのスピナー。線の太さは mask 内の 6px で調整します。mask は主要モダンブラウザで利用できます。

Loading...

点滅テキスト

.bnto-load-text {
  font-family: monospace;
  font-weight: 700; font-size: 18px;
  letter-spacing: .08em;
  color: hsl(340 65% 55%);
  animation: bnto-blink 1.2s ease-in-out infinite;
}
@keyframes bnto-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .25; }
}
使い方のコツ

文字だけで完結する最軽量ローダー。「読み込み中…」など日本語にしてもOKです。スピナーの下に添えて併用すると、何を待っているかが伝わりやすくなります。

ストライプバー

.bnto-load-stripes {
  width: 150px; height: 12px;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg,
    hsl(43 100% 50%) 0 12px,
    hsl(43 90% 68%) 12px 24px);
  animation: bnto-stripes .6s linear infinite;
}
@keyframes bnto-stripes { to { background-position: 34px 0; } }
使い方のコツ

床屋のサインポールのように縞が流れます。縞幅（12px）を変えたら、background-position の 34px も「縞2本分 × √2」に合わせるとループが滑らかです。アップロード中の表示に好相性。

フリップスクエア

.bnto-load-flip {
  width: 36px; height: 36px;
  background: hsl(212 70% 50%);
  border-radius: 6px;
  animation: bnto-flip 1.6s ease-in-out infinite;
}
@keyframes bnto-flip {
  0%   { transform: perspective(140px) rotateX(0) rotateY(0); }
  50%  { transform: perspective(140px) rotateX(-180deg) rotateY(0); }
  100% { transform: perspective(140px) rotateX(-180deg) rotateY(-180deg); }
}
使い方のコツ

縦→横の順に裏返る立体的なローダー。奥行き感は perspective(140px) の数値が小さいほど強くなります。サイトのロゴ画像を background に敷いてブランドローダーにするのも定番です。

CSSローディングアニメーションの基礎知識

ローディングアニメーションは、通信や処理の待ち時間に「動いている」ことを伝えるUIパーツです。何も表示されない画面より、スピナーやプログレスバーがあるだけで体感の待ち時間は大きく短くなり、離脱の防止につながります。このページでは、コピペで使えるCSSローディングを12種類掲載しています。

すべてGIF画像や JavaScript を使わないピュアCSS製です。画像と違って色やサイズの変更が自由で、Retinaでもにじまず、ファイルの読み込み自体が発生しないため「ローダーの読み込み待ち」という本末転倒も起きません。CSSタブのコードには動きに必要な @keyframes まで含まれているので、スタイルシートに貼り付けるだけで完動します。

使い分けの目安は、ボタン押下後などの短い処理待ちにはスピナーやドット、ページやリストなどコンテンツ全体の読み込みには、表示後のレイアウトを予告できるスケルトンスクリーンが向いています。

表示タイミングの設計

0.3秒以内に終わる処理にローダーを出すと、逆にチラついて遅く感じさせてしまいます。「0.3秒待ってから表示する」遅延を入れるのが定石です。逆に数秒かかる処理では、点滅テキストやプログレスバーで「何を待っているか」を添えると安心感が増します。

サイズと配置のカスタマイズ

大きさは width / height、速さは animation の秒数を変えるだけ。画面中央に置くなら親要素に display: flex; align-items: center; justify-content: center; を指定するのが手軽です。各カードの「シャッフル」ボタンで色・サイズのバリエーションを試すと、コードも自動で書き換わります。

prefers-reduced-motionへの配慮

動きに敏感なユーザーのため、OSで「視差効果を減らす」を選んでいる環境では回転や点滅を控えめにするのが親切です。@media (prefers-reduced-motion: reduce) 内で animation-duration を長くするか、静的な表示に差し替えましょう。

よくある質問

コピーしたローディングアニメーションはそのまま動きますか？
はい。CSSタブのコードには動きに必要な @keyframes まで含まれているので、スタイルシートに貼り付けるだけでアニメーションが動きます。クラス名はすべて bnto- で始まる独自プレフィックス付きで、既存のスタイルと衝突しにくい設計です。
JavaScriptは必要ですか？
アニメーション自体はCSSだけで動くのでJavaScriptは不要です。読み込みが終わったタイミングでローダー要素を非表示にする（display: none にする・要素を削除する）処理だけ、アプリ側のJSで行ってください。
スピナーとスケルトンスクリーンはどう使い分ければいい？
ボタン押下後の短い処理待ちにはスピナーやドット、ページやリストなどコンテンツ全体の読み込みには表示後のレイアウトを予告できるスケルトンスクリーンが向いています。スケルトンはガタつき（レイアウトシフト）の防止にも効果的です。
商用サイトで利用できますか？
はい、すべてのパーツは商用・個人を問わず無料で利用できます。登録やクレジット表記も不要です。
このページのパーツはAIコーディングツールでも使えますか？
はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「ドット」）を伝えるだけで適用を指示できます。AIがWebを読めない場合は、「コピー」ボタンで取得したHTMLとCSSをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に表示確認することをおすすめします。

関連カテゴリ

ローディングと組み合わせて使いやすいパーツはこちら。

ホバーアニメーション テキストエフェクト フォーム部品 アラート