--- 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 source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/progress md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/progress.md --- # 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](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/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 (24) ### Supported targets * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-announcement-) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-04/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Rewards progress**: Show how close a customer is to reaching the next loyalty or rewards tier. * **Free shipping threshold**: Visualize how much more a customer needs to spend to qualify for free shipping. * **Loading states**: Indicate that an asynchronous operation is in progress with an indeterminate progress bar. * **Error recovery**: Communicate a failed process with the `critical` tone alongside an error message. *** ## Properties Configure the following properties on the progress component. * **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 ### Display a progress bar Display a basic progress bar. This example shows an `s-progress` element at 50% completion. ## Display a progress bar ![A horizontal progress bar filled to approximately fifty percent.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/progress-default-c6s5vyif.png) ## html ```html ``` ### Show rewards tier progress Display how close a customer is to reaching the next tier. This example uses a [stack](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/layout-and-structure/stack) to position point counts on either side of the progress bar with a motivational message below. ## html ```html Rewards progress 350 / 500 points Earn 150 more points to reach Gold tier ``` ### Indicate an error state Use the `critical` tone to communicate that a process has failed. This example pairs a red progress bar with a [banner](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/web-components/feedback-and-status-indicators/banner) that describes the error and guides the customer toward a resolution. ## html ```html The file couldn't be uploaded. Check the file size and try again. ``` *** ## Best 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 customer, like rewards tiers or free shipping thresholds. ***