パーツ番号 09-15-12 ・ CSSのみ

達成率プログレスバー付きバッジ棚

複数のミニバッジと進捗バーを組み合わせ、コレクション全体の達成率を示す静止見本です。実績コンプリート画面のサマリー表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-12-shelf">
          <div class="d09-15-12-row">
            <span class="d09-15-12-mini d09-15-12-on"></span>
            <span class="d09-15-12-mini d09-15-12-on"></span>
            <span class="d09-15-12-mini d09-15-12-on"></span>
            <span class="d09-15-12-mini d09-15-12-on"></span>
            <span class="d09-15-12-mini d09-15-12-off"></span>
            <span class="d09-15-12-mini d09-15-12-off"></span>
          </div>
          <div class="d09-15-12-bar">
            <div class="d09-15-12-fill"></div>
          </div>
          <p class="d09-15-12-txt">コレクション達成 8 / 12</p>
        </div>

CSS

.d09-15-12-shelf{width:220px;display:flex;flex-direction:column;gap:10px;align-items:center}
        .d09-15-12-row{display:flex;gap:8px}
        .d09-15-12-mini{width:24px;height:24px;border-radius:50%;box-sizing:border-box}
        .d09-15-12-on{background:linear-gradient(145deg,#34d399,#059669)}
        .d09-15-12-off{background:#e2e8f0;border:1px dashed #cbd5e1}
        .d09-15-12-bar{width:100%;height:8px;border-radius:999px;background:#e2e8f0;overflow:hidden}
        .d09-15-12-fill{width:66%;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:999px}
        .d09-15-12-txt{margin:0;font-size:11px;font-weight:700;color:#475569}

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