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

グラデーションカラープログレスバー

塗りつぶし部分にグラデーションを用いたバーです。目標達成率やKPI表示に華やかさを加えられます。

staticcss

プレビュー

ソースコード

HTML

<div class="gwrap">
          <div class="glabel"><span>売上目標達成率</span><span class="gnum">76%</span></div>
          <div class="gtrack"><div class="gfill"></div></div>
        </div>

CSS

.d09-10-07 .gwrap{width:100%;max-width:280px}
        .d09-10-07 .glabel{display:flex;justify-content:space-between;font-size:13px;color:#334155;margin-bottom:8px}
        .d09-10-07 .gnum{font-weight:700;color:#1e293b}
        .d09-10-07 .gtrack{width:100%;height:14px;background:#e5e7eb;border-radius:8px;overflow:hidden}
        .d09-10-07 .gfill{width:76%;height:100%;border-radius:8px;background:linear-gradient(90deg,#4f7cff,#8b5cf6,#ec4899)}

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