サークルプログレス — 動きの伝え方辞典

circular progress / ring progress

サークルプログレス

進捗率に応じて円周が描かれていくリング。stroke-dasharrayに円周長を入れ、stroke-dashoffsetを進捗で減らすSVGの定番テクニックで、スキル表示やアップロード進捗まで使い回せる。

01 — Demo video

Play live →

02 — Prompt template

進捗率に応じて円周が描かれるサークルプログレスを実装してください。

- SVGの circle を2つ重ね、背面は薄い色のトラック(完全な円)、前面が進捗の弧
- 前面の circle に stroke-dasharray: 円周長(2πr) を設定し、stroke-dashoffset = 円周長 × (1 - 進捗率) で {{progress}}% まで描く
- 開始位置が12時になるよう -90deg 回転させておく
- 表示時に stroke-dashoffset を {{duration}}s の ease-out で transition させ、0%から目標値まで描く
- stroke-linecap: round で先端を丸め、中央に進捗率の数値を置く
- レイアウトに影響するプロパティは動かさない(stroke-dashoffsetのみアニメーション)
- prefers-reduced-motion 時はアニメーションせず、最終の進捗率を即時表示する

進捗率に応じて円周が描かれるサークルプログレスを実装してください。

- SVGの circle を2つ重ね、背面は薄い色のトラック(完全な円)、前面が進捗の弧
- 前面の circle に stroke-dasharray: 円周長(2πr) を設定し、stroke-dashoffset = 円周長 × (1 - 進捗率) で {{progress}}% まで描く
- 開始位置が12時になるよう -90deg 回転させておく
- 表示時に stroke-dashoffset を {{duration}}s の ease-out で transition させ、0%から目標値まで描く
- stroke-linecap: round で先端を丸め、中央に進捗率の数値を置く
- レイアウトに影響するプロパティは動かさない(stroke-dashoffsetのみアニメーション)
- prefers-reduced-motion 時はアニメーションせず、最終の進捗率を即時表示する

進捗率に応じて円周が描かれるサークルプログレスを実装してください。

- SVGの circle を2つ重ね、背面は薄い色のトラック(完全な円)、前面が進捗の弧
- 前面の circle に stroke-dasharray: 円周長(2πr) を設定し、stroke-dashoffset = 円周長 × (1 - 進捗率) で {{progress}}% まで描く
- 開始位置が12時になるよう -90deg 回転させておく
- 表示時に stroke-dashoffset を {{duration}}s の ease-out で transition させ、0%から目標値まで描く
- stroke-linecap: round で先端を丸め、中央に進捗率の数値を置く
- レイアウトに影響するプロパティは動かさない(stroke-dashoffsetのみアニメーション)
- prefers-reduced-motion 時はアニメーションせず、最終の進捗率を即時表示する

03 — Params

duration(描画時間 s) — 範囲 0.4〜3 / 初期 1.5
1〜2sが見せ場として丁度いい。0.5s未満だと描かれる過程が伝わらない。
progress(進捗率 %) — 範囲 5〜100 / 初期 72
デモ用の到達値。実装ではデータから算出した値を渡す。

04 — Vocab

circumference(円周長) — 2πr。dasharrayとdashoffsetの計算の基準になる値で、これを間違えると弧が一周しない。
stroke-dashoffset — 破線の開始位置をずらす指定。円周長から進捗分を引いた値にすると「描かれた長さ」を制御できる。
確定(determinate) — 完了までの割合が分かるローディング表現。割合が取れないならリングスピナー等の不確定表現を使う。
pathLength — SVG要素の路長を任意の値(例:100)に正規化する属性。使うとdashoffsetを進捗%そのままで書ける。

05 — NG → OK examples

言い方: 「「進捗を丸いゲージで見せて」」

なぜNG: conic-gradientの角がガタつく実装や、開始位置が3時のまま・先端が角ばったままの弧が返ってくる。dashoffset方式と開始位置・先端処理を指定しないと細部で崩れる。

言い方: 「「circular progressをSVG 2重circle + stroke-dashoffsetで。円周長をdasharrayに設定、-90degで12時始まり、1.5s ease-outで0→72%を描画。linecap round、中央に数値。reduced-motionでは即時表示」」

なぜOK: dashoffsetの計算式・開始位置・時間・先端処理まで指定。「12時始まり」の一言がないと弧は3時から描かれ、途端に素人っぽくなる。