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

進捗リング付き実績バッジ

円形の進捗リングでバッジの達成度を表現した静止見本です。学習コースの修了率や実績コンプリート率の可視化表示に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-15-09-wrap">
          <div class="d09-15-09-ring" style="background:conic-gradient(#2563eb 0deg 270deg,#e2e8f0 270deg 360deg)">
            <div class="d09-15-09-inner">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="#2563eb"><path d="M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7-6.2-3.8-6.2 3.8 1.6-7-5.4-4.7 7.1-.7z"/></svg>
            </div>
          </div>
          <p class="d09-15-09-pct">達成率 75%</p>
        </div>

CSS

.d09-15-09-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d09-15-09-ring{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center}
        .d09-15-09-inner{width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.12)}
        .d09-15-09-pct{margin:0;font-size:12px;font-weight:700;color:#475569}

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