データ可視化・ダッシュボード
ドーナツ進捗
SVGの stroke-dashoffset で指定%まで円弧が描かれ、中央に数値%がカウントアップで表示される。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="dp-wrap">
<svg class="dp-svg" viewBox="0 0 120 120" aria-label="進捗 72%">
<circle class="dp-track" cx="60" cy="60" r="50"/>
<circle class="dp-fill" cx="60" cy="60" r="50"/>
</svg>
<div class="dp-center">
<div class="dp-value"><span class="dp-num">0</span><span class="dp-pct">%</span></div>
<div class="dp-sub">完了</div>
</div>
<button class="dp-btn" type="button" aria-label="アニメーションを再生">再生</button>
</div>