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

二重リングプログレス

内側と外側で異なる項目の進捗を同時に表示するリングです。2軸の指標比較を1つのグラフでまとめられます。

staticcss

プレビュー

ソースコード

HTML

<svg viewBox="0 0 120 120" width="150" height="150">
          <circle cx="60" cy="60" r="50" fill="none" stroke="#e5e7eb" stroke-width="8"/>
          <circle cx="60" cy="60" r="50" fill="none" stroke="#6366f1" stroke-width="8"
            stroke-dasharray="314.16" stroke-dashoffset="62.8" stroke-linecap="round"
            transform="rotate(-90 60 60)"/>
          <circle cx="60" cy="60" r="35" fill="none" stroke="#f1f5f9" stroke-width="8"/>
          <circle cx="60" cy="60" r="35" fill="none" stroke="#14b8a6" stroke-width="8"
            stroke-dasharray="219.9" stroke-dashoffset="121" stroke-linecap="round"
            transform="rotate(-90 60 60)"/>
          <text x="60" y="56" text-anchor="middle" font-size="13" font-weight="700" fill="#6366f1">80%</text>
          <text x="60" y="72" text-anchor="middle" font-size="13" font-weight="700" fill="#14b8a6">45%</text>
        </svg>

CSS

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

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