ローディング

HTML・CSS・JavaScriptで作ったローディングのデザイン集です。コピペで簡単にご利用頂けます。ローディングは処理中であることを示すUI。アニメーションで待ち時間を感じさせにくくし、ユーザーの離脱を防ぎます。

  • 「交互ドット」

    両端の点が交互に点滅

  • 「バーウェーブ」

    高低差が波打つ縦バーアニメ

  • 「ブロックフェード」

    四角が順にフェード変化

  • 「バウンスドッツ」

    順番に跳ねる三つのドット表示

  • 「ホイールバウンス」

    円形が上下に跳ね続ける

  • 「サークルスケール」

    円が伸縮するシンプルな動き

  • 「カラーフロー」

    色が滑らかに変化するバー

  • 「クロス回転」

    2本のバーが十字に回転

  • 「キューブロール」

    立方体が面を転がるロール動作

  • 「デュアルリング」

    透明部が交差する二重リング回転

  • 「フェードバー」

    バーが徐々に透明になるアニメ

  • 「フェードドット」

    点が順番にフェード表示される

  • 「フリッカードット」

    点が点滅するフリッカー効果

  • 「フリップスクエア」

    正方形が裏返る3Dフリップアニメ

  • 「折り畳みバー」

    横バーが中央から折れるように縮む

  • 「グラデバー」

    斜線グラデが流れる進捗バー

  • 「多層パルス」

    同心円が段階的に脈動

  • 「マルチリング」

    多重リングが重なって回転

  • 「ピボットドット」

    点が回転しながら中心を移動

  • 「パルスドット」

    点が脈動して拡縮するアニメ

  • 「リングドット」

    輪の上を点が周回する演出

  • 「リングパルス」

    輪が拡大しつつ薄くなるアニメ

  • 「リップルサークル」

    波紋が広がる二重円リップル

  • 「ローリングボックス」

    箱が転がるように回転移動

  • 「回転バー」

    長方形バーが中心で回転

  • 「回転シリンダー」

    円柱形が縦に回転する演出

  • 「スケールバー」

    横長バーが伸縮するアニメ

  • 「シャトルドット」

    点が左右に往復移動する

  • 「スライスロール」

    ケーキのような一部が回転

  • 「ドットスライド」

    点が横にスライドして消える

  • 「ドットスネーク」

    点が波打つように連続移動

  • 「リングスピナー」

    時計回りに回転する円形スピナー

  • 「スピン四角」

    四角形が高速回転するスピン

  • 「スピンストライプ」

    ストライプが回転して流れる

  • 「ストライプロール」

    横縞が回転する視覚錯覚風

  • 「ローディングリング」

    太線のリングが回転する

  • 「三角ジャンプ」

    三角形が上下にバウンドする

  • 「波紋ライン」

    横線が波のように動くアニメ

  • 「ジグザグボックス」

    四角がジグザグに動く演出

  • 「ジグザグライン」

    線がジグザグに進行するバー

このページのトップへ戻る