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

薄型ミニマルプログレスバー

細線で控えめに進捗を示すミニマルデザインです。情報量を抑えたい管理画面や一覧表示に馴染みます。

staticcss

プレビュー

ソースコード

HTML

<div class="mwrap">
          <div class="mrow"><span class="mlb">Step 1</span><div class="mtrack"><div class="mfill" style="width:100%"></div></div></div>
          <div class="mrow"><span class="mlb">Step 2</span><div class="mtrack"><div class="mfill" style="width:70%"></div></div></div>
          <div class="mrow"><span class="mlb">Step 3</span><div class="mtrack"><div class="mfill" style="width:30%"></div></div></div>
        </div>

CSS

.d09-10-10 .mwrap{width:100%;max-width:260px;display:flex;flex-direction:column;gap:16px}
        .d09-10-10 .mrow{display:flex;align-items:center;gap:10px}
        .d09-10-10 .mlb{width:56px;font-size:11px;color:#94a3b8}
        .d09-10-10 .mtrack{flex:1;height:3px;background:#e5e7eb;border-radius:2px;overflow:hidden}
        .d09-10-10 .mfill{height:100%;background:#334155;border-radius:2px}

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