--- title: Progress description: >- Shows how far a task or goal has advanced. Use for shipping thresholds, checkout steps, uploads, and other measurable goals. api_version: 2026-07-rc source_url: html: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/progress md: >- https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/progress.md api_name: checkout-ui-extensions --- # 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/checkout-ui-extensions/2026-07-rc/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 (29) ### Supported targets * [purchase.​checkout.​actions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/navigation#navigation-target) * [purchase.​checkout.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/block#block-target) * [purchase.​checkout.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#line-item-targets) * [purchase.​checkout.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-cart-line-list-) * [purchase.​checkout.​contact.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/information#information-target) * [purchase.​checkout.​delivery-address.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-delivery-address-) * [purchase.​checkout.​delivery-address.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#delivery-address-targets) * [purchase.​checkout.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/footer#footer-target) * [purchase.​checkout.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/header#header-target) * [purchase.​checkout.​payment-method-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#render-after-payment-methods-) * [purchase.​checkout.​payment-method-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/payment#payment-targets) * [purchase.​checkout.​pickup-location-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#render-after-pickup-locations-) * [purchase.​checkout.​pickup-location-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-list-targets) * [purchase.​checkout.​pickup-location-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/local-pickup#location-option-item-target) * [purchase.​checkout.​pickup-point-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#render-after-pickup-points-) * [purchase.​checkout.​pickup-point-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/pickup-points#pickup-points-targets) * [purchase.​checkout.​reductions.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#checkout-reductions-after-) * [purchase.​checkout.​reductions.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/order-summary#reductions-targets) * [purchase.​checkout.​shipping-option-item.​details.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-item-targets) * [purchase.​checkout.​shipping-option-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-option-) * [purchase.​checkout.​shipping-option-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#render-after-shipping-options-) * [purchase.​checkout.​shipping-option-list.​render-before](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/checkout/shipping#shipping-option-list-targets) * [purchase.​thank-you.​announcement.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/announcement#thank-you-announcement-) * [purchase.​thank-you.​block.​render](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/block#block-target) * [purchase.​thank-you.​cart-line-item.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#line-item-targets) * [purchase.​thank-you.​cart-line-list.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/order-summary#thank-you-cart-line-list-) * [purchase.​thank-you.​customer-information.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/information#information-target) * [purchase.​thank-you.​footer.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/footer#footer-target) * [purchase.​thank-you.​header.​render-after](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/targets/thank-you/header#header-target) #### Use cases * **Free shipping threshold**: Visualize how much more a buyer needs to spend to qualify for free shipping. * **Rewards progress**: Show how close a buyer is to reaching the next loyalty or rewards tier. * **Loading states**: Indicate that an asynchronous operation is in progress with an indeterminate progress bar. * **Failed processes**: 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 rendered example of the progress component](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/progress-default-c6s5vyif.png) ## html ```html Free shipping progress Spend $24 more to qualify for free shipping ``` ### Show rewards tier progress Display how close a buyer is to reaching the next tier. This example uses a [stack](https://shopify.dev/docs/api/checkout-ui-extensions/2026-07-rc/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/checkout-ui-extensions/2026-07-rc/web-components/feedback-and-status-indicators/banner) that describes the error and guides the buyer 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 buyer, like rewards tiers or free shipping thresholds. ***