やってみよう「＋10%」を押すと、輪が伸びていきます
読み込み・待機マイナー（知る人ぞ知る）
プログレスリング
Progress Ring / Circular Progress
輪っかが少しずつ色で埋まっていき、何%まで進んだかが一目でわかる。
別名円形プログレスサークルプログレスアクティビティリングドーナツグラフ（進捗）
どこで使われている？
- よく見かける場所
- Apple Watchのアクティビティ、歩数計、学習アプリの目標
- 使うとよい場面
- 目標に対する達成度を、ひと目で見せたいとき
- 避けたい場面
- 細かい数字を比べる場面（棒グラフにする）
補足ずっと回り続けて終わりがわからないものは「スピナー」、横棒で表すものは「プログレスバー」です。
似ているものとの違い
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「プログレスリング（Progress Ring / Circular Progress）」を実装してください。 動き：円形のリングを灰色で描き、その上に進み具合の分だけ色付きの線を時計回りに重ねる。値が変わったときは線がなめらかに伸び、中央に現在の%を大きく表示する。100%で一周する。 使う部品：SVG の circle と stroke-dasharray
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | SVG の circle と stroke-dasharray |
|---|---|
| iPhoneアプリなら | Circle().trim(from: 0, to: 値) で自作 |
| Androidアプリなら | CircularProgressIndicator(progress = { 値 }) |
| Flutterなら | CircularProgressIndicator(value: 値) |
| React Nativeなら | react-native-svg で自作（react-native-circular-progress） |