ドーナツ進捗
SVGの stroke-dashoffset で指定%まで円弧が描かれ、中央に数値%がカウントアップで表示される。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 達成率・完了率を 1 つの数字で示す KPI
- 目標に対する進み具合の可視化
- カード内に収める小さな進捗
- 避ける場面
- 複数系列の比較（棒グラフが向く）
- 毎秒更新される値（アニメが追いつかない）
- 構成要素
- トラック円
- 進捗弧
- 中央の数値
- 補足ラベル
- 再生ボタン
- 持っている状態
- 通常
- ホバー
- キーボード
Tab で再生ボタンへ、Enter／Space で再生
- 支援技術
svg は role=progressbar＋aria-label「完了率」＋aria-valuenow／min／max（値は目標値を即時に持つ）。中央の数値は aria-hidden の見た目用。reduced-motion では弧とカウントを省き最終値を即表示
- 動き
弧が 1.1s ease-out で伸び、中央の数値が同じ時間でカウントアップ。到達までの過程を示す
デザインの要点
- 弧は stroke-dasharray を円周（2πr≒314.16）にして dashoffset を減らす。path を描き直すより軽く滑らか
- svg を −90° 回して 12 時から始める。既定の 3 時始まりは時計の比喩に合わず、進捗に見えない
- 弧の 1.1s と数値のカウントを同じイージングで揃える。片方が先に着くと「まだ動いている」と誤読する
- 値の正本は aria-valuenow に目標値を即時に置く。カウント中の途中値を読み上げても意味が無い
コード（コピーして使えます）
<div class="dp-wrap">
<svg class="dp-svg" viewBox="0 0 120 120" role="progressbar" aria-label="完了率" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72" aria-valuetext="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" aria-hidden="true">
<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>