---
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: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/feedback/spinner
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/feedback/spinner.md
---

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

## 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

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

### Size

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

### Examples

* #### Basic Spinner

  ##### React

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

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

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

  ##### JS

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

  export default extension('purchase.checkout.block.render', (root) => {
    const spinner = root.createComponent(Spinner);

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

## Preview

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

## Appearance

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

## Related

[Component - Progress](progress)