Choose a version:

Progress

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

Pair progress with text components to communicate what the progress bar is tracking. For a loading indicator without a progress bar, use spinner instead.

Progress doesn't include a built-in text label. Pair it with text components to describe the current state for accessibility.

Support

Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the progress component.

Anchor to accessibilityLabel accessibilityLabel string: A label announced by assistive technologies that describes what is progressing. Use this to provide context about the ongoing task, such as "Loading order details" or "Uploading file".
Anchor to id id string: A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.
Anchor to max max number Default: 1: The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.

Learn more about the max attribute.
Anchor to tone tone 'auto' | 'critical' Default: 'auto': The semantic meaning and color treatment of the progress indicator.

auto: Automatically determined based on context.

critical: Indicates an urgent or error state requiring immediate attention.
Anchor to value value number: How much of the task has been completed. Must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.

Learn more about the value attribute.

Anchor to ExamplesExamples

Anchor to Display a progress barDisplay a progress bar

Display a basic progress bar. This example shows an s-progress element at 50% completion.

Display a progress bar

A rendered example of the progress component

html

<s-progress value="50" max="100" accessibility-label="50 percent complete"></s-progress>

Anchor to Show rewards tier progressShow rewards tier progress

Display how close a buyer is to reaching the next tier. This example uses a stack to position point counts on either side of the progress bar with a motivational message below.

html

<s-stack direction="block" gap="small-200">

<s-stack direction="inline" justifyContent="space-between">

<s-text>Rewards progress</s-text>

<s-text color="subdued">350 / 500 points</s-text>

</s-stack>

<s-progress value="350" max="500" accessibilityLabel="350 of 500 points toward Gold tier"></s-progress>

<s-text color="subdued">Earn 150 more points to reach Gold tier</s-text>

</s-stack>

Anchor to Indicate an error stateIndicate an error state

Use the critical tone to communicate that a process has failed. This example pairs a red progress bar with a banner that describes the error and guides the buyer toward a resolution.

html

<s-stack direction="block" gap="small-200">

<s-progress value="0.3" tone="critical" accessibilityLabel="Upload failed at 30%"></s-progress>

<s-banner heading="Upload failed" tone="critical">

The file couldn't be uploaded. Check the file size and try again.

</s-banner>

</s-stack>

Anchor to Best practicesBest practices

Pair with text to communicate status: The progress bar alone doesn't convey what's happening. Add a label, percentage, or description using text components.
Add reassuring text for loading states: When using an indeterminate progress bar, include text like "Loading..." to confirm the operation is still in progress.
Use the critical tone with an error description: When a process fails, switch the tone to critical and add a banner or text describing the error and next steps.
Visualize meaningful goals: Use determinate progress bars for goals that are valuable to the buyer, like rewards tiers or free shipping thresholds.

Was this page helpful?