このツールはブラウザで即時実行できます。登録もサーバー処理も不要です。
このツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドこのツールが役に立ちましたか？
byteflow.tools をインストールすると、起動が速くなり、オフラインでもツールを使えます。
インストールガイドspinner、dots、bars ローダーをサイズ・速度付きで作成し、CSS をエクスポートします。
Web インターフェイスでの軽量ステータス フィードバック用に、カスタマイズ可能な形状、タイミング、配色を備えた CSS 読み込みインジケーターを生成します。
コンポーネントに直接コピーできる純粋な CSS ローダー アニメーションを生成します。
チームが追加の画像アセットや依存関係なしで一貫した読み込み状態を作成するのに役立ちます。
スピナー、パルス、バー スタイル インジケーターを使用した迅速な実験をサポートします。
スピナー プリセット
サイズ: 32 ピクセル、境界線: 3 ピクセル、速度: 0.9 秒
ドット プリセット
3 ドット バウンス、ギャップ: 6 ピクセル、継続時間: 1.1 秒
カラー設定
プライマリ: #2563EB、ミュート: #CBD5E1
Loader CSS
.loader { animation: spin 0.9s linear infinite; }Keyframes
@keyframes spin { to { transform: rotate(360deg); } }A11y note
支援技術ユーザー向けにローダーと説明的なステータス テキストをペアにします。
ローダーのアニメーションが気が散る
速度を下げ、モーション パターンを簡素化します。
ローダーの色のコントラストが低い
背景表面に対してコントラストに準拠した色を使用します。
リクエストが失敗した場合に無限ローダーが表示されます
非同期でタイムアウト/エラー状態遷移を追加しますフロー。
ローダーによりレイアウトがシフトする
レンダリング前にインジケーターをロードするために固定スペースを予約します。
CSS ローダージェネレーター は、提出・公開・引き継ぎの前に行う迅速な検証ステップとして運用するのが適切です。
ローダーは常に無限に回転する必要がありますか?
実際の作業が進行している間のみ。即座に成功またはエラー状態に切り替えます。
敏感なユーザーのために動きを減らすにはどうすればよいですか?
動きを減らしたバリアントを提供し、動きを減らしたものを優先します。
ローダーにとって SVG は CSS よりも優れていますか?
どちらも機能します。 CSS は、軽量のアプリ内インジケーターに便利です。
ローダーにはテキスト ラベルが必要ですか?
はい、ステータス テキストにより、明瞭さとアクセシビリティが向上します。