リング・ドット・バー・パルスなど、定番のローディングアニメーション（CSSスピナー）をスライダー操作で直感的に生成できます。
色・サイズ・速度・太さをプレビューで確認しながら、コピペで使えるHTML/CSSコードをワンクリックで取得できます。
このツールは …回 使われています。
Background（プレビュー背景）
Style（スピナーの種類）
Presets
選べるローディングアニメーション6種類
読み込み中であることをユーザーに伝えるローディング表示。このツールでは、定番から個性派まで6種類のスピナーをCSSだけで生成できます。JavaScriptは不要です。
リング / デュアルリング
もっとも定番の回転スピナー。円形の枠線の一部だけに色を付けて回転させています。デュアルリングは上下2箇所に別の色を付けた2色版です。
もっとも定番の回転スピナー。円形の枠線の一部だけに色を付けて回転させています。デュアルリングは上下2箇所に別の色を付けた2色版です。
ドット / バー
複数の要素が時間差で動くタイプ。
複数の要素が時間差で動くタイプ。
animation-delay をずらすことで「順番に跳ねる・伸びる」動きを作っています。個数はスライダーで変えられます。
パルス / 波紋
中心から広がりながら消えていくタイプ。
中心から広がりながら消えていくタイプ。
transform: scale() と opacity の組み合わせで、やわらかい印象のローディングになります。
使い方
- 「Style」から作りたいスピナーの種類を選びます。迷ったら「Presets」から近いイメージを選ぶのが早いです。
- 「Color」でメインカラーを決めます。デュアルリング・波紋の場合は「Color 2」で2色目も設定します。
- スライダーで大きさ・速度・太さを微調整します。ドット・バーは「Items」で個数も変えられます。
- プレビューで実際の動きを確認します。背景を Dark に切り替えると、暗いサイトでの見え方もチェックできます。
- 仕上がったら「Copy」ボタンでコードをコピーし、自分のサイトに貼り付けます。
コードの使い方
コピーしたコードは .my-loader クラスとして出力されます。ローディングを表示したい場所にHTMLを置き、CSSをスタイルシートに追加するだけで動きます。
例：読み込み中エリアに表示する場合
<div class="loading-area"> <div class="my-loader"></div> </div>
※ ドット・バー・波紋は .my-loader の中に子要素の div が必要です。「HTML + CSS」形式でコピーすると構造ごと取得できます。
※ クラス名 .my-loader は自由に変更できます。変更する場合は @keyframes 以外のセレクタをまとめて置き換えてください。
※ コピーしたコードは HTML・CSS・JSコードプレビューツール で動作確認できます。
きれいに見せるコツ
速度は 0.8〜1.5秒 が目安
速すぎると忙しない印象、遅すぎると止まって見えます。1周 1秒前後にすると、多くのサイトで自然に馴染みます。
速すぎると忙しない印象、遅すぎると止まって見えます。1周 1秒前後にすると、多くのサイトで自然に馴染みます。
サイズは控えめに
ローディングは主役ではありません。ボタン内なら 20〜24px、画面中央でも 48〜64px 程度に抑えると、上品な見た目になります。
ローディングは主役ではありません。ボタン内なら 20〜24px、画面中央でも 48〜64px 程度に抑えると、上品な見た目になります。
背景とのコントラストを確認
淡い色のスピナーは白背景で見えにくくなります。プレビュー背景を切り替えて、実際に使う場所と近い背景で確認するのがおすすめです。
淡い色のスピナーは白背景で見えにくくなります。プレビュー背景を切り替えて、実際に使う場所と近い背景で確認するのがおすすめです。