Choose a version:

Progress

Displays an indicator showing the completion status of a task. Use to visually communicate progress in either determinate (known percentage) or indeterminate (unknown duration) states.

Anchor to propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context.

Use it to provide context of what is progressing.
Anchor to id id string: A unique identifier for the element.
Anchor to max max number Default: 1: This attribute describes how much work the task indicated by the progress element requires.

The max attribute, if present, must have a value greater than 0 and be a valid floating point number.
Anchor to tone tone 'auto' | 'critical': Sets the tone of the progress, based on the intention of the information being conveyed.
Anchor to value value number: Specifies how much of the task has been completed.

It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.

ProgressProps

accessibilityLabel
A label that describes the purpose of the progress. When set, it will be announced to users using assistive technologies and will provide them with more context. Use it to provide context of what is progressing.
```
string
```
id
A unique identifier for the element.
```
string
```
max
This attribute describes how much work the task indicated by the progress element requires. The `max` attribute, if present, must have a value greater than 0 and be a valid floating point number.
```
number
```
tone
Sets the tone of the progress, based on the intention of the information being conveyed.
```
'auto' | 'critical'
```
value
Specifies how much of the task has been completed. It must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
```
number
```

export interface ProgressProps extends Pick<ProgressProps$1, 'accessibilityLabel' | 'id' | 'max' | 'tone' | 'value'> {
    tone?: Extract<ProgressProps$1['tone'], 'auto' | 'critical'>;
}

Was this section helpful?

Code

<s-progress value="0.5"></s-progress>

Preview

Anchor to best-practicesBest Practices

Use components like Paragraph or Text, along with the Progress component, to display text indicating the status of the progress bar.

Loading states

For loading states, add text to reassure the user that the progress bar is not frozen.

Error states

For error states, add text or a Banner to describe the error and next steps. Use the critical tone property to convey urgency.

A progress bar with error text that says

Visualize a goal

Use the Progress component to visualize a goal that's valuable to the customer.

Here's an example of using a progress bar to show a customer's progress toward the next rewards tier:

A progress bar in customer accounts, showing that the customer is on their way to reaching the Botanical maven rewards tier.

Here's an example of using a progress bar to show how much more a customer needs to spend to get free shipping:

A progress bar at checkout, showing that the customer is $43 away from free shipping.