Donut Chart Fill (ドーナツチャートフィル)
別名 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
リングや円グラフが時計回りにパーセンテージまで塗りつぶされます。
使いどころ
構成比の内訳
バリエーション
- SVG stroke-dashoffset
- conic-gradient with @property
- multi-segment
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にドーナツチャートフィル(Donut Chart Fill)アニメーションを追加してください。パイチャートスイープ(pie chart sweep)、アニメーテッドドーナツチャート(animated donut chart)とも呼ばれます。
上端から始めて、各セグメントが順番に時計回りに広がり、リングがそれぞれの割合を示すまで進み、終わりに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、実際の値はスクリーンリーダー向けにテキストとして読めるようにしてください。