---
title: Spinner
description: >-
  Spinner is used to notify buyers that their action is being processed. The
  Spinner is usually used when sending or receiving data from a server.
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/spinner
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/spinner.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.

# Spinner

Spinner is used to notify buyers that their action is being processed. The Spinner is usually used when sending or receiving data from a server.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* 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

## SpinnerProps

* **accessibilityLabel**

  **string**

  A label to use for the Spinner that will be used for buyers using assistive technologies like screen readers. If will also be used to replace the animated loading indicator when buyers prefers reduced motion. If not included, it will use the loading indicator for all buyers.

* **appearance**

  **Extract\<Appearance, 'accent' | 'monochrome'>**

  **Default: 'accent'**

  Sets the appearance (color) of the icon.

* **id**

  **string**

  A unique identifier for the component.

* **size**

  **Extract\<Size, 'extraSmall' | 'small' | 'base' | 'large' | 'fill'>**

  **Default: 'base'**

  Adjusts the size of the icon.

### Appearance

A keyword that maps to a predefined color or visual treatment from the design system. Used to convey meaning or emphasis through color. - \`base\`: The default color for the element set within the theme. - \`accent\`: Conveys emphasis and draws attention to the element. - \`decorative\`: Uses the \`decorative\` color set within the theme. - \`interactive\`: Conveys that the element is pressable or hoverable. Deprecated; use \`accent\` instead. - \`subdued\`: Conveys a subdued or disabled state. - \`info\`: Conveys informational content. - \`success\`: Conveys a successful interaction. - \`warning\`: Conveys something needs attention or action. - \`critical\`: Conveys a problem has arisen. - \`monochrome\`: Takes the color of its parent, giving a uniform appearance.

```ts
'base' | 'accent' | 'decorative' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'
```

### Size

A keyword that maps to a predefined size from the design system's size scale. Components use a subset of these values depending on which sizes they support. - \`extraSmall\`: The smallest available size. - \`small\`: A compact size, smaller than the default. - \`base\`: The default size, appropriate for most contexts. - \`large\`: A larger size for increased visual prominence. - \`extraLarge\`: The largest available keyword size. - \`fill\`: Stretches to fill the available space in the container.

```ts
'extraSmall' | 'small' | 'base' | 'large' | 'extraLarge' | 'fill'
```

Examples

## Preview

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

### Examples

* #### Basic Spinner

  ##### React

  ```tsx
  import {
    reactExtension,
    Spinner,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.page.render',
    () => <Extension />,
  );

  function Extension() {
    return <Spinner />;
  }
  ```

  ##### JS

  ```js
  import {extension, Spinner} from '@shopify/ui-extensions/customer-account';

  export default extension('customer-account.page.render', (root) => {
    const spinner = root.createComponent(Spinner);

    root.appendChild(spinner);
  });
  ```

## Appearance

| Value | Description |
| - | - |
| `"accent"` | Conveys emphasis and draws attention to the element. |
| `"monochrome"` | Takes the color of its parent. |

## Related

[Component - Progress](progress)