--- 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: 2025-07 api_name: customer-account-ui-extensions source_url: html: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/progress md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/progress.md --- Migrate to Polaris Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension. # Progress Use the Progress component to visually represent the completion of a task or process. The component supports both determinate (known percentage) and indeterminate (unknown duration) states. Pair Progress with [Text](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/titles-and-text/text) or [TextBlock](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/titles-and-text/textblock) 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/2025-07/ui-components/feedback-and-status-indicators/spinner) instead. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/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/2025-07/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/2025-07/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/2025-07/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 that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied won't be announced to screen readers. * **id** **string** A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component. * **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 ### Show a loading state Use an indeterminate progress bar when the duration of an operation isn't known. Omit the `value` prop to render an animated loading indicator. ## Show a loading state ![An indeterminate progress bar with a loading animation.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/progress-indeterminate-CZLd3XOz.gif) ## Show a loading state ##### React ```tsx import { reactExtension, Progress, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, Progress} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const baseProgress = root.createComponent(Progress, { accessibilityLabel: 'Loading', }); root.appendChild(baseProgress); }); ``` ### Track progress toward a goal Set a `value` and `max` to show determinate progress. This example displays a rewards tier progress bar with point counts and a description of how many more points are needed. ## Track progress toward a goal ![A determinate progress bar showing 350 out of 500 points toward a rewards tier.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/progress-determinate-B65rePul.png) ## Track progress toward a goal ##### React ```tsx import { reactExtension, BlockStack, Grid, Progress, Text, TextBlock, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { const label = 'Rewards progress'; return ( {label} 350 / 500 points Earn 150 more points to reach Gold tier ); } ``` ##### JS ```js import { extension, BlockStack, Grid, Progress, Text, TextBlock, } from '@shopify/ui-extensions/customer-account'; export default extension( 'customer-account.page.render', (root) => { const label = 'Rewards progress'; const progress = root.createComponent( BlockStack, null, [ root.createComponent( Grid, {columns: ['fill', 'auto']}, [ root.createComponent(Text, null, label), root.createComponent( Text, {appearance: 'subdued'}, '350 / 500 points', ), ], ), root.createComponent(Progress, { value: 350, max: 500, accessibilityLabel: label, }), root.createComponent( TextBlock, {appearance: 'subdued'}, 'Earn 150 more points to reach Gold tier', ), ], ); root.appendChild(progress); }, ); ``` ### Indicate an error state Use the `critical` tone to visually communicate that a process has failed. Pair the progress bar with a [Banner](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner) to describe the error and guide the customer toward a resolution. ## Indicate an error state ##### React ```tsx import { reactExtension, BlockStack, Progress, Banner, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import { extension, BlockStack, Progress, Banner, } from '@shopify/ui-extensions/customer-account'; export default extension( 'customer-account.page.render', (root) => { const container = root.createComponent(BlockStack, null, [ root.createComponent(Progress, { value: 0.3, tone: 'critical', accessibilityLabel: 'Upload failed', }), root.createComponent(Banner, { status: 'critical', title: 'The file upload failed. Check your file and try again.', }), ]); root.appendChild(container); }, ); ``` *** ## 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 or TextBlock 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. *** ## Limitations * The Progress component doesn't include a built-in text label. Pair it with Text or TextBlock to describe the current state. * The `value` must be a valid floating point number between 0 and `max` (or between 0 and 1 if `max` is omitted). * There's no animation control for the indeterminate state. The animation runs automatically when `value` is omitted. * Customers who prefer reduced motion see a static text label instead of the animated indicator, if `accessibilityLabel` is set. ***