Progress Bar Generator

使い方

1. 幅と高さ（px）、さらに角丸を指定します。角丸は高さの半分までに制限され、両端が潰れた形になるのを防ぎます。
2. バーの色とトラックの色を選びます。
3. アニメーションを選びます。なし、ストライプの移動、またはバーの明暗が繰り返されるパルスです。
4. **進捗（%）**を動かすと、0 から 100 までの任意の値でプレビューできます。
5. Copy でコードをコピーするか、Download で HTML ファイルとして保存します。

よくある用途

• アップロードや取り込み画面 —— ストライプが動いていれば、処理中だと伝わります。
• ダッシュボードや使用量メーター —— 幅違いのバーを 2 本作り、ストレージと予算の使用量に使えます。
• プロトタイプ —— バーのスクリーンショットではなく、実際のマークアップを静的ページに貼り込めます。
• オンボーディングのチェックリスト —— 手順が終わるたびにバーを更新して進捗を示せます。

よくある質問

Q: このコードにライブラリや外部スタイルシートは必要ですか？ A: 不要です。div 2 つと style ブロック 1 つだけで、アニメーションを選んだ場合は keyframes が 1 つ増えます。自分の CSS に移しても構いません。

Q: 入力した角丸より小さくなるのはなぜですか？ A: 高さの半分を超える角丸はバーの形を崩すため、高さの半分に制限しています。

Q: 実際の進捗表示にも使えますか？ A: 使えます。自分のコードから .pb-fill の幅を変更するだけで、他は何も変える必要がありません。

Q: ストライプのアニメーションは重くありませんか？ A: 1 要素の background-position だけを動かしているため、ブラウザの合成コストは低く、アニメーション中に JavaScript も動きません。