Skip to main content

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.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

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.

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

A progress bar with

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.

Was this page helpful?