ProgressIndicator
A ProgressIndicator is a visual element used to indicate the ongoing, indefinite progress of an action or process.
| Name | Value |
|---|---|
| Props | |
showLabel | |
| Slots | |
default | |
| View | |
Reading direction | |
Overview
When to use ProgressIndicator
ProgressIndicator animates continuously to indicate that an action or content loading is in progress, helping users understand when the system is actively working on a task with unknown completion time.
Use ProgressIndicator when:
- Indicating asynchronous processes with an unknown completion time.
- Displaying inline with text to represent ongoing background processes.
- Loading section-level content where preserving layout isn't essential.
- Providing immediate feedback for user-initiated actions.
- Offering a compact, animated visual cue to indicate ongoing activity.
Avoid using ProgressIndicator when:
- Loading states need to maintain content layout. In such cases, use an inline ProgressBar instead.
About ProgressIndicator
ProgressIndicator includes the following elements.
Spinner indicator
A rotating element that represents an ongoing process or loading state. It helps users understand that an action is in progress.
- Use for indeterminate, short-duration processes.
- Don't modify the spinner's color or size.
Label (optional)
A brief message providing additional context about the loading process, such as a description of the action being performed or an estimated wait time.
- Include a label when additional clarification is needed for the loading context.
- Don't use lengthy or unclear loading messages.
Examples
Basic usage
By default, the spinner appears without text, serving as a simple visual indicator of a loading process.
- Center the spinner in its loading area.
WARNING
ProgressIndicator require one of the following: Label via default slot or set the aria-hidden attribute.
When either is set the ProgressIndicator is understandable to assistive technology users.
With label
A spinner can be accompanied by text in cases where additional context is needed to clarify the loading process.
- Use clear, concise text to describe the loading process.
- Don't use long or multi-line text.
- Don't add ellipsis (…) to loading text - the spinner already communicates the ongoing process.
Technical implementation
Vue usage
Props
| Prop name | Description | Type | Default |
|---|---|---|---|
showLabel | Whether the label should be visible. This will show or hide the text carrying <span> element next to the progress indicator. | boolean | false |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | ProgressIndicator label text. |
CSS-only version
Markup structure
The most common usage of ProgressIndicators is without a label. In the CSS-only version, there is a small deviation from the Vue version. The aria-label attribute is used to provide a description of the progress indicator to assistive technologies – instead of a label element to ensure leaner markup.