カテゴリー: 開発ツール
CSS ローディングスピナージェネレーター
軽量な CSS ローダーをローカルで設計してコードをコピー
ライブプレビュー付きで CSS だけのローディングスピナーを作成します。サイズ、色、線の太さ、速度を調整して HTML と CSS のスニペットをコピーできます。JavaScript も画像も不要です。
プレビュー
<span class="loader" role="status" aria-label="読み込み中…"></span>
.loader {
display: inline-block;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 4px solid #dfe4de;
border-top-color: #2f6f4f;
border-radius: 50%;
animation: loader-spin 0.9s linear infinite;
}
@keyframes loader-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.loader,
.loader span {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
}
どのスニペットも transform と opacity だけをアニメーションさせ、最後に prefers-reduced-motion のブロックを置いています。動きを減らす設定をしている人にはアニメーションが止まります。
JavaScript も画像も Web フォントも不要で、ブラウザーの外には何も出ません。
このページの処理はすべてブラウザ内で行われます。アップロードは一切ありません。
このツールでできること
ローディング表示は、数行の CSS がライブラリーに明確に勝る数少ない場面の一つです。読み込むスクリプトも、要求する画像も、待っている当のものより先に初期化するものもありません。ここにある 5 つのテンプレート — リング、二重リング、ドット、バー、パルス — は `transform` と `opacity` だけをアニメーションさせるので、ブラウザーはフレームごとにレイアウトを計算し直す代わりにコンポジター上で処理できます。各スニペットは `prefers-reduced-motion` のブロックで終わります。スピナーは装飾であり、システムに動きを止めるよう頼んだ人がそれを眺めさせられる理由はないからです。マークアップはラベル付きの `<span role="status">` なので、スクリーンリーダーは空の箱を見つける代わりに待機中であることを読み上げます。
使い方
- テンプレートを選び、サイズ・線の太さ・速度・色を設定します。
- 既存のスタイルシートと衝突しそうなら、クラス名を変更します。
- HTML と CSS をプロジェクトにコピーします。
プライバシー
このツールはすべてブラウザ内で動作します。入力した内容がアップロード・保存・共有されることはなく、タブを閉じれば消えます。
よくある質問
- スピナーは CSS だけですか？
- はい。いずれも span 1 つ（ドットとバーのテンプレートでは空の子 span がいくつか付きます）と CSS アニメーションだけです。JavaScript も SVG も画像も Web フォントもありません。
- 動かすのに JavaScript は必要ですか？
- いいえ。要素がドキュメントに入った時点でアニメーションが始まります。コードが必要なのは、いつ表示していつ隠すかを決める部分だけです。
- 速度や色は変更できますか？
- はい。サイズ、線の太さ、アニメーションの長さ、主色、トラックの色はすべてこのページの操作項目で、コピーするスニペットにそのまま書き込まれます。
- 動きを減らしたい利用者にはどうなりますか？
- 生成されるスニペットはすべて prefers-reduced-motion のメディアクエリで終わり、実質的にアニメーションを止めます。表示自体は残りますが、システムで動きを減らしている人には回転しません。
- コードはローカルで生成されますか？
- はい。設定もプレビューも生成されたスニペットもブラウザー内にとどまり、何もアップロードされません。