パーツ番号 05-12-04 ・ CSSのみ

ドーナツチャート(中央に数値表示)

中央に数値を配置した静止ドーナツチャートです。達成率や進捗のイメージを直感的に伝えたいサービス紹介セクションに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-12-04-donut">
          <div class="d05-12-04-hole">
            <span class="d05-12-04-num">68<small>%</small></span>
            <span class="d05-12-04-lbl">完了率</span>
          </div>
        </div>

CSS

.d05-12-04{padding:20px}
        .d05-12-04-donut{position:relative;width:150px;height:150px;border-radius:50%;background:conic-gradient(#10b981 0deg 245deg,#e2e8f0 245deg 360deg)}
        .d05-12-04-hole{position:absolute;inset:16px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #f1f5f9}
        .d05-12-04-num{font-size:26px;font-weight:800;color:#1e293b;line-height:1}
        .d05-12-04-num small{font-size:14px;font-weight:700;margin-left:1px}
        .d05-12-04-lbl{margin-top:4px;font-size:11px;color:#94a3b8;font-weight:600}

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