Visual Studio Code Progress Ring

The vscode-progress-ring component is used to indicate an indeterminate loading state.

Usage

❌ 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.

Implementation

Interactive component examples

Attributes

None

Basic Progress Ring

The progress ring displays a looping animation to indicate an indeterminate state where the wait time is unspecified.

<vscode-progress-ring></vscode-progress-ring>