---
title: Progress
description: >-
  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.
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/feedback-and-status-indicators/progress
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/feedback-and-status-indicators/progress.md
---

# 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 (24)

### 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

## Properties

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

* **id**

  **string**

  A unique identifier for the element.

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

* **tone**

  **'auto' | 'critical'**

  **Default: 'auto'**

  Sets the tone of the progress, based on the intention of the information being conveyed.

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

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/progress-default-c6s5vyif.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-progress value={0.5}></s-progress>
  ```

## Best Practices

* Pair Progress with Paragraph or Text to communicate the current status of a process.
* **Loading states:** Add reassuring text to indicate the bar is still loading.
* **Error states:** Add text or a critical Banner to describe the error and next steps. Use the `critical` tone.
* **Goals:** Use Progress to visualize meaningful goals, such as rewards tiers or free shipping thresholds.