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

パーセンテージ数値併記プログレスバー

バーの右側に数値を明示する構成です。数値の把握を重視するダッシュボードや管理画面に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="pwrap">
          <div class="prow"><span class="plb">クラウド容量</span><div class="ptrack"><div class="pfill" style="width:63%"></div></div><span class="pval">63%</span></div>
          <div class="prow"><span class="plb">タスク完了</span><div class="ptrack"><div class="pfill p2" style="width:90%"></div></div><span class="pval">90%</span></div>
        </div>

CSS

.d09-10-09 .pwrap{width:100%;max-width:280px;display:flex;flex-direction:column;gap:18px}
        .d09-10-09 .prow{display:flex;align-items:center;gap:10px}
        .d09-10-09 .plb{width:82px;font-size:12px;color:#475569;flex-shrink:0}
        .d09-10-09 .ptrack{flex:1;height:16px;background:#eef2f7;border-radius:8px;overflow:hidden}
        .d09-10-09 .pfill{height:100%;border-radius:8px;background:#4f7cff}
        .d09-10-09 .p2{background:#14b8a6}
        .d09-10-09 .pval{width:36px;text-align:right;font-size:13px;font-weight:700;color:#1e293b}

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