The vscode-progress-ring component is used to indicate an indeterminate loading state.
| ❌ Don't | ✅ Do |
|---|---|
 |
 |
| Don't use a Progress Ring to indicate user progress on a multi-step task. | Indicate indeterminate progress while the extension waits for something to load or to finish executing. |
| ❌ Don't | ✅ Do |
|---|---|
 |
 |
| Don't use multiple Progress Rings in close proximity. | Use a single Progress Ring in a view. If multiple must be used, ensure they are in clearly defined sections of the extension. |
Interactive component examples
None
The progress ring displays a looping animation to indicate an indeterminate state where the wait time is unspecified.
<vscode-progress-ring></vscode-progress-ring>