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

横長プログレスバー(複数固定値)

複数項目の進捗を横バーで一覧表示する構成です。制作進行状況や導入率の比較表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <div class="row"><span class="lb">デザイン</span><div class="track"><div class="fill f1"></div></div><span class="pc">85%</span></div>
          <div class="row"><span class="lb">開発</span><div class="track"><div class="fill f2"></div></div><span class="pc">60%</span></div>
          <div class="row"><span class="lb">コーディング</span><div class="track"><div class="fill f3"></div></div><span class="pc">40%</span></div>
          <div class="row"><span class="lb">公開準備</span><div class="track"><div class="fill f4"></div></div><span class="pc">25%</span></div>
        </div>

CSS

.d09-10-01 .wrap{width:100%;display:flex;flex-direction:column;gap:14px}
        .d09-10-01 .row{display:flex;align-items:center;gap:10px}
        .d09-10-01 .lb{width:78px;font-size:12px;color:#475569;flex-shrink:0}
        .d09-10-01 .track{flex:1;height:10px;background:#e5e7eb;border-radius:6px;overflow:hidden}
        .d09-10-01 .fill{height:100%;border-radius:6px}
        .d09-10-01 .f1{width:85%;background:#4f7cff}
        .d09-10-01 .f2{width:60%;background:#22c55e}
        .d09-10-01 .f3{width:40%;background:#f59e0b}
        .d09-10-01 .f4{width:25%;background:#ec4899}
        .d09-10-01 .pc{width:34px;text-align:right;font-size:12px;color:#334155;font-weight:600}

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