§01-15Data Visualization

プログレスリング

進捗率を円弧の長さで示す。

目標に対する達成度を狭い面積で示せる。カードやアイコン横など、横長のバーが置けない場所で進み具合を伝えたいときに使う。

実装のポイント

円周 2πr を strokeDasharray、残量を strokeDashoffset に入れ -rotate-90 で 12 時起点にする。role=「progressbar」で値を伝える。