Spinner

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Show a loading indicatorShow a loading indicator

Display a basic spinner to indicate that content is loading. Without an accessibilityLabel, the spinner renders an animated indicator for all customers.

Show a loading indicator

Show a loading indicator

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

import {

reactExtension,

Spinner,

} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(

'customer-account.page.render',

() => <Extension />,

);

function Extension() {

return <Spinner />;

}

9

1

2

3

4

5

6

7

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);

});

React

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

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

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

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);
});

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

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

function Extension() {
  return (
    <BlockStack inlineAlignment="center" spacing="base">
      <Spinner accessibilityLabel="Loading order details" />
      <Text appearance="subdued">
        Loading order details...
      </Text>
    </BlockStack>
  );
}

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

export default extension('customer-account.page.render', (root) => {
  const container = root.createComponent(
    BlockStack,
    {inlineAlignment: 'center', spacing: 'base'},
    [
      root.createComponent(Spinner, {
        accessibilityLabel: 'Loading order details',
      }),
      root.createComponent(
        Text,
        {appearance: 'subdued'},
        'Loading order details...',
      ),
    ],
  );

  root.appendChild(container);
});

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

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

function Extension() {
  return (
    <InlineStack spacing="base" blockAlignment="center">
      <Spinner
        size="small"
        appearance="monochrome"
        accessibilityLabel="Refreshing"
      />
      <Text appearance="subdued">
        Refreshing your subscription...
      </Text>
    </InlineStack>
  );
}

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

export default extension('customer-account.page.render', (root) => {
  const container = root.createComponent(
    InlineStack,
    {spacing: 'base', blockAlignment: 'center'},
    [
      root.createComponent(Spinner, {
        size: 'small',
        appearance: 'monochrome',
        accessibilityLabel: 'Refreshing',
      }),
      root.createComponent(
        Text,
        {appearance: 'subdued'},
        'Refreshing your subscription...',
      ),
    ],
  );

  root.appendChild(container);
});

Anchor to Best practicesBest practices

• Always provide an accessibility label: Set accessibilityLabel so screen readers can announce what's loading. Without it, the spinner is just an animated graphic with no context.
• Use spinners for page or section loading, not buttons: For button loading states, use the button's built-in loading property instead.
• Pair with descriptive text: Spinners alone don't explain what's happening. Add nearby text that describes the operation in progress.
• Use monochrome to blend with content: Set appearance="monochrome" when the spinner should match the color of its parent element rather than using the default accent color.

Anchor to LimitationsLimitations

• The Spinner component doesn't include built-in text. Pair it with layout and text components to describe the loading state.
• Customers who prefer reduced motion see a static text label instead of the animated indicator, but only if accessibilityLabel is set. Without it, the animated indicator is shown to all customers.
• Spinner sizes are limited to the predefined set (extraSmall, small, base, large, fill). Custom sizes aren't supported.