パーツ番号 09-10-03 ・ CSSのみ

セグメント区切りプログレスバー

バーを複数ブロックに分割してステップ達成度を示す表示です。申込フォームの進行状況などに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="segwrap">
          <div class="seglabel">導入ステップ 4/6 完了</div>
          <div class="segrow">
            <span class="seg on"></span>
            <span class="seg on"></span>
            <span class="seg on"></span>
            <span class="seg on"></span>
            <span class="seg"></span>
            <span class="seg"></span>
          </div>
        </div>

CSS

.d09-10-03 .segwrap{width:100%;max-width:280px}
        .d09-10-03 .seglabel{font-size:12px;color:#475569;margin-bottom:10px;text-align:center}
        .d09-10-03 .segrow{display:flex;gap:6px}
        .d09-10-03 .seg{flex:1;height:12px;border-radius:4px;background:#e5e7eb}
        .d09-10-03 .seg.on{background:#22c55e}

クラス名 .d09-10-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。