Loader Generator

使い方

1. 種類を選びます。スピナーリング・バウンドするドット・プログレスバー・パルスリング・スケルトンシマーの 5 種です。
2. サイズを動かして拡縮します。プログレスバーでは軌道の幅、スケルトンではブロックの高さになります。
3. 周期時間を秒で設定します。小さい値は急いだ印象、1.5 秒前後は落ち着いた印象です。
4. 動く部分にメイン色、静止部分にトラック色を選びます。スケルトンではこの 2 色がシマーグラデーションの両端になります。
5. CSS と小さな HTML をコピーしてページに貼り付けます。デモ枠はまったく同じコードで動作しています。

こんなときに

• ボタンやフォームの待機状態 —— 送信中にボタン内で小さなリングを回す。
• コンテンツのプレースホルダ —— 読み込まれるカードの形にスケルトンを置く。
• 画面遷移のフィードバック —— 次のページを取得中にヘッダー下へ全幅バーを出す。
• アップロードや処理画面 —— ドットやパルスで待機画面が固まったように見えないようにする。

プライバシーについて

アニメーションはページ内で組み立てた純粋な CSS キーフレームであり、デモは同じ CSS をスコープ付き style 要素で実行しています。アップロードもサーバー側のスクリプト実行もありません。

FAQ

Q: なぜ種類によって太さスライダーが無効になるのですか？ A: 全体サイズとは独立に線幅を持つのがスピナーリングとプログレスバーだけです。ドット・パルス・スケルトンはすべての寸法をサイズ値から導くため、太さは効果を持ちません。

Q: システムの「動きを減らす」設定に対応していますか？ A: 生成される CSS は無条件に動きます。アクセシビリティのため、アニメーション規則を @media (prefers-reduced-motion: reduce) で包み、動きの抑制を求める利用者には静的またはより遅い代替を用意してください。

Q: 待ち時間が読めない場合はどれを使うべきですか？ A: 不定形のもの、つまりリング・ドット・バー・パルスです。これらは無限に繰り返すので、架空の進捗率を見せずに済みます。計測できる待ちだけ、確定的なプログレス表示にしてください。

Q: スケルトンの色は変えられますか？ A: はい。トラック色とメイン色がシマーグラデーションの両端になります。控えめにしたい場合は同じ面色の近い 2 トーン、はっきりさせたい場合は対比の強い組み合わせを選んでください。