---
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-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/feedback-and-status-indicators/progress
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/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 (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

## Properties

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

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

* **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).

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

* **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).

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

Use components like [Paragraph](../titles-and-text/paragraph) or [Text](../titles-and-text/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 ](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/progress-loading.png)

### Error states

For error states, add text or a [Banner](./banner) to describe the error and next steps. Use the `critical` tone property to convey urgency.

![A progress bar with error text that says ](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/progress-error.png)

### 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.](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/progress-goal.png)

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.](https://shopify.dev/images/landing-pages/templated-apis/checkout-ui-extensions/ui-components/progress-free-shipping.png)