# Spinner

> **Deprecated.** Use
> [ActivityIndicator](../ActivityIndicator/ActivityIndicator.md) for new work.
> `ActivityIndicator` is the supported indeterminate loading indicator going
> forward — it offers the same semantic with a cleaner prop surface, a polite
> `role="status"`, theme-adaptive tokens, Material-style three-layer
> animation, and a `prefers-reduced-motion` fallback. `Spinner` continues to
> work unchanged for existing call sites.

Spinner is used to indicate the loading of content where the actual amount of
loading time or progress is unknown.

## Design & usage guidelines

The default Spinner size is `base` and can be used in most cases. The `small`
Spinner should be used on individual elements of an interface (e.g.
[Button](../Button/Button.md) or [Card](../Card/Card.md) contents) or when
[inline](/storybook/web/?path=/story/components-status-and-feedback-spinner--inline)
with content.

## Accessibility

The Spinner should announce itself to users of assistive technology such as
screenreaders.

The following built-in properties help Spinner convey its role effectively:

* `role="alert"` allows the Spinner to be announced as an alert feedback
  element.
* `aria-busy={true}` informs the user that the view is busy, setting the
  expectation that they cannot interact for the time being.
* `aria-label="loading"` reads out "Loading" to assistive tech, adding context
  as to *why* the view is busy.

## Related components

If the amount of progress or loading time is known, use
[ProgressBar](../ProgressBar/ProgressBar.md) to give better context around the
process.

To indicate loading content in mobile applications, refer to
[ActivityIndicator](../ActivityIndicator/ActivityIndicator.md).


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `inline` | `boolean` | No | — | Spinner becomes an inline element when true, otherwise it is a block element |
| `size` | `"base" | "small"` | No | `base` | Specifies the size of the spinner |