# ProgressIndicator
Use this component to notify merchants that their action is being processed or loaded.
### Simple spinner example

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

### 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.
### id
A unique identifier for the element.
### size
The size of the component.
### tone
Set the color of the progress indicator.

- `inherit` will take the color value from its parent, giving the progress indicator a monochrome appearance.
### variant
Style of the progress indicator
### SizeScale

'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'
## Related
- [Button](/docs/api/admin-extensions/components/actions/button)