CSSローダージェネレーター

このツールについて

この CSS ローダー作成ツールは、スピナー、跳ねるドット、リング、パルス、バー、デュアルリングの 6 種類の純 CSS ローディングアニメーションを作成します。サイズ、色、速度、太さを調整でき、CSS と HTML の両方を出力します。

使い方

1. ローダーのスタイルを選びます。
2. サイズ、色、速度、太さを調整します。
3. ライブプレビューを確認します。
4. 「CSS + HTML をコピー」をクリックし、両方をページに貼り付けます。

知っておきたいこと

• 純 CSS のローダーには、画像、GIF、JavaScript は不要です。
• スピナーは @keyframes と transform: rotate() で回転するため、効率よくアニメーションできます。
• マークアップは要素 1 つだけ、ドットやバーの場合は子要素がいくつか加わる程度です。
• スクリーンリーダーがローダーを読み上げられるよう、role="status" と「Loading…」のような視覚的に非表示のラベルを追加しましょう。
• prefers-reduced-motion の場合は、ローダーを遅くしたり止めたりすることを検討してください。

すべてブラウザ内で動作します。入力した内容がアップロード・保存されることはありません。

よくある質問