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

円形プログレスリング(固定値)

SVGの円弧で進捗率を表現する静止リング表示です。ダッシュボードや達成率カードに向いています。

staticcss

プレビュー

ソースコード

HTML

<svg viewBox="0 0 120 120" width="140" height="140">
          <circle cx="60" cy="60" r="50" fill="none" stroke="#e5e7eb" stroke-width="10"/>
          <circle cx="60" cy="60" r="50" fill="none" stroke="#4f7cff" stroke-width="10"
            stroke-dasharray="282.74" stroke-dashoffset="79.2" stroke-linecap="round"
            transform="rotate(-90 60 60)"/>
          <text x="60" y="66" text-anchor="middle" font-size="22" font-weight="700" fill="#1e293b">72%</text>
        </svg>

CSS

.d09-10-02 svg{display:block}

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