ツールへスキップ
JoeLucky

ツールの ★ をクリックして保存

ツールカテゴリ

コードを画像にCSS グラデーションジェネレーターグラスモーフィズムジェネレーターBox Shadow ジェネレーターCSS ローディングアニメーションSVG Blob ジェネレーターSVG から PNG へ色のコントラストチェッカーPX／REM／EM 変換
JoeLucky

実用的なオンラインツールをひとまとめに

プライバシーポリシー利用規約

© 2026 JoeLucky®. All rights reserved.

  1. JoeLucky
  2. /CSS とデザイン
  3. /CSS ローディングアニメーション

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

純粋な CSS で作るさまざまなローディングアニメーションを生成

アニメーションの種類を選択

アニメーション設定

#6366F1
サイズ40px
速度（秒）1.0s

⚡ 値が小さいほどアニメーションが速くなります

ライブプレビュー — スピナー
CSS コード
<!-- HTML -->
<div class="loader" style="width:40px;height:40px"></div>

<!-- CSS -->
<style>
.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>

類似ツール：CSS とデザイン

すべて見る
コードを画像に

コードを見栄えのよい共有用画像に変換。複数のテーマに対応

開く →
CSS グラデーションジェネレーター

線形・放射状・円錐グラデーションを視覚的にデザインし、CSS コードをすぐにコピー

開く →
グラスモーフィズムジェネレーター

💬 コメント

?

まだコメントはありません。最初のコメントを書いてみましょう！

CSS ローディングアニメーションとは？

10 種類の純粋な CSS ローディングアニメーションから選び、色・サイズ・速度を調整して HTML と CSS をコピーできます。JavaScript は不要で、どのページやフレームワークにもそのまま使えます。

使い方

  1. 上から 10 種類のアニメーションを選べます。スピナーはページ全体の読み込み、ドットはチャットの入力中表示、スケルトンはコンテンツのプレースホルダー、リップルはボタンの待機表示に適しています。
  2. 左側の「アニメーション設定」で色（カラーピッカー）、サイズ（20～80px）、速度（0.3～3.0 秒）を調整できます。右側のドット格子背景のプレビューにリアルタイムで反映されます。
  3. 「速度」の値が小さいほどアニメーションは速くなります。一般的なローダーには 0.8～1.5 秒がおすすめです。0.5 秒未満は慌ただしく、2 秒を超えると固まったように感じられます。
  4. プレビューヘッダーに 3 つのコピーボタンがあります。「HTML」はマークアップのみ、「CSS」はスタイルのみ、「すべてコピー」は説明コメント付きの完全なコードをまとめて取得します。
  5. すべてのアニメーションは純粋な CSS で実装されており、JavaScript への依存はありません。静的 HTML、React、Vue など、あらゆるフレームワークのプロジェクトにそのまま貼り付けられます。

よくある質問

CSS ローディングアニメーションにはどんな種類がありますか？

回転する円、跳ねるドット、プログレスバー、ウェーブ、パルスなど、すべて純粋な CSS のアニメーションです。

これらのアニメーションに JavaScript は必要ですか？

いいえ。すべて純粋な CSS アニメーションで、JavaScript への依存はありません。

色やサイズをカスタマイズできますか？

はい。カラーピッカーとサイズ調整が用意されており、リアルタイムでプレビューしながら CSS を出力できます。

グラスモーフィズム効果をリアルタイムでプレビューし、ワンクリックで CSS コードをコピー

開く →