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.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to PropertiesProperties
Configure the following properties on the progress component.
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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 idididstringstring
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 maxmaxmaxnumbernumberDefault: 1Default: 1
The total amount of work the task requires. Must be a value greater than
0and a valid floating point number.Learn more about the max attribute.
- Anchor to tonetonetone'auto' | 'critical''auto' | 'critical'Default: 'auto'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 valuevaluevaluenumbernumber
How much of the task has been completed. Must be a valid floating point number between
0andmax, or between0and1ifmaxis 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
html
Anchor to Show rewards tier progressShow rewards tier progress
Display how close a customer 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
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 customer toward a resolution.
html
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
criticaland 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 customer, like rewards tiers or free shipping thresholds.