パーツ番号 02-05-11 ・ CSSのみ

進捗バー付きリスト

各項目に達成率を示すバーを添えたリストです。プロジェクトの進行状況や工程の完了度を一覧で見せたいときに使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-11-list">
          <li><span class="d02-05-11-label">デザイン制作</span><span class="d02-05-11-bar"><i style="width:100%"></i></span></li>
          <li><span class="d02-05-11-label">コーディング</span><span class="d02-05-11-bar"><i style="width:70%"></i></span></li>
          <li><span class="d02-05-11-label">最終テスト</span><span class="d02-05-11-bar"><i style="width:30%"></i></span></li>
        </ul>

CSS

.d02-05-11-list{list-style:none;margin:0;padding:0;width:100%;max-width:280px;display:flex;flex-direction:column;gap:14px;}
        .d02-05-11-list li{display:flex;flex-direction:column;gap:5px;}
        .d02-05-11-label{font-size:12px;color:#333;font-weight:600;}
        .d02-05-11-bar{display:block;width:100%;height:8px;border-radius:4px;background:#eef0f3;overflow:hidden;}
        .d02-05-11-bar i{display:block;height:100%;background:#4a6cf7;border-radius:4px;}

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