# ProgressIndicator

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

```tsx
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);
  },
);

```

## ProgressIndicatorProps

### ProgressIndicatorProps

### size

value: `SizeScale`

  - SizeScale: 'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'
The size of the component.

### tone

value: `"default" | "inherit"`

Set the color of the progress indicator.

- `inherit` will take the color value from its parent,
giving the progress indicator a monochrome appearance.

### variant

value: `"spinner"`

Style of the progress indicator

### id

value: `string`

A unique identifier for the element.

### accessibilityLabel

value: `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.

## Related

- [Button](https://shopify.dev/docs/api/admin-extensions/components/actions/button)