Choose a version:

ProgressIndicator

Use this component to notify merchants that their action is being processed or loaded.

Anchor to progressindicatorpropsProgressIndicatorProps

Anchor to size size required: The size of the component.
Anchor to accessibilityLabel 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 will not be announced to screen readers.
Anchor to id id string: A unique identifier for the element.
Anchor to tone tone 'inherit' | 'default' Default: 'default': Set the color of the progress indicator.

inherit will take the color value from its parent, giving the progress indicator a monochrome appearance.
Anchor to variant variant "spinner" Default: 'spinner': Style of the progress indicator

ProgressIndicatorProps

accessibilityLabel
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 will not be announced to screen readers.
```
string
```
id
A unique identifier for the element.
```
string
```
size
The size of the component.
```
SizeScale
```
tone
Set the color of the progress indicator. - `inherit` will take the color value from its parent, giving the progress indicator a monochrome appearance.
```
'inherit' | 'default'
```
variant
Style of the progress indicator
```
"spinner"
```

export interface ProgressIndicatorProps
  extends GlobalProps,
    AccessibilityLabelProps {
  /**
   * The size of the component.
   */
  size: SizeScale;

  /**
   * Set the color of the progress indicator.
   *
   * - `inherit` will take the color value from its parent,
   * giving the progress indicator a monochrome appearance.
   *
   * @defaultValue 'default'
   */
  tone?: 'inherit' | 'default';

  /**
   * Style of the progress indicator
   * @default 'spinner'
   */
  variant?: 'spinner';
}

SizeScale

'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'

Was this section helpful?

Simple spinner example

import {

reactExtension,

ProgressIndicator,

} from '@shopify/ui-extensions-react/admin';

reactExtension('Playground', () => <App />);

function App() {

return (

);

}

examples

Simple spinner example

React

import {
  reactExtension,
  ProgressIndicator,
} from '@shopify/ui-extensions-react/admin';

reactExtension('Playground', () => <App />);

function App() {
  return (
    <ProgressIndicator size="small-200" />
  );
}

JS

import {
  extension,
  ProgressIndicator,
} from '@shopify/ui-extensions/admin';

export default extension(
  'Playground',
  (root) => {
    const progressIndicator = root.createComponent(
      ProgressIndicator,
      {
        size: 'small-200',
      },
    );

    root.appendChild(progressIndicator);
  },
);

Preview

Anchor to relatedRelated

Button