> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Spinner - Web
> Spinners are ephemeral indicators for loading or processing states.
> [!NOTE]
>
> For development, import `Spinner` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3?node-id=2-694).
## Anatomy
The Spinner consists of two primary elements that work together to indicate loading or processing states.
1. Track (circular background)
2. Arc (animated rotating segment)
## Options
The Spinner supports multiple sizes and color configurations to accommodate various loading indicator scenarios.
#### Size
Spinners come in three sizes:
* **Small (16px)**: for inline use with text or inside buttons
* **Medium (40px)**: default size for standalone loading indicators
* **Large (80px)**: for prominent loading states
Custom sizes are also available for scenarios not covered by these existing sizes.
Spinner's track and arc scale with the size of the Spinner.
#### Color
By default, the Spinner uses the primary background color. When inherit is enabled, it inherits the current text color.
## Behavior
The Spinner responds to different size and color requirements while maintaining consistent animation.
#### Animation
The Spinner uses a continuous rotation animation at 1 second per revolution. The arc rotates clockwise around the circular track.
#### Responsive sizing
The Spinner can be resized using the `style` property. The stroke width automatically adjusts proportionally to maintain visual consistency at any size.
## Usage Guidelines
Use the Spinner when a large area of content is loading or an operation is in progress and the duration is indeterminate.
| Standard | Requirement |
| - | - |
| DoFetching data from an API | Fetching data from an API |
| DoSubmitting a form | Submitting a form |
| DoProcessing user actions | Processing user actions |
| DoMatch size to context | Match the Spinner size to its surrounding context; see [Choose the right size](#choose-the-right-size). |
| DoOne Spinner at a time | Use one Spinner at a time; see [Number of spinners](#number-of-spinners). |
| Don'tKnown-duration operations | For operations with a known duration |
| Don'tLoading initial content | For loading initial content |
| Don'tMismatched sizing | Avoid mismatching the Spinner size to its surrounding context; see [Choose the right size](#choose-the-right-size). |
| Don'tMultiple simultaneous Spinners | Avoid showing multiple Spinners simultaneously; see [Number of spinners](#number-of-spinners). |
### Alternatives
#### Spinner vs Skeleton
Use a Spinner for focused loading states (e.g., a form submitting, fetching data from an API). Use a [Skeleton](https://anvil.servicetitan.com/docs/components/skeleton/web.md) when loading initial content.
#### Spinner vs Progress Bar
Use a Spinner when the duration of the operation is unknown or indeterminate. Use a [Progress Bar](https://anvil.servicetitan.com/docs/components/progress-bar/web.md) when you can track and display the actual progress percentage.
### How to Use
#### Choose the right size
Select a Spinner size appropriate for its context:
* **Small**: Inline with text or inside buttons
* **Medium**: Standalone loading indicators (default)
* **Large**: Full-page or section loading states
**Do**
Match the Spinner size to its surrounding context.
**Don’t**
Mismatch the Spinner size to its surrounding context.
#### Number of spinners
Use one Spinner at a time. Avoid showing multiple Spinners simultaneously.
**Do**
Use one Spinner at a time.
**Don’t**
Avoid showing multiple Spinners simultaneously.
## Keyboard Interaction
The Spinner is not focusable and does not support keyboard interaction.
### Accessibility
| Feature | Implementation |
| - | - |
| Role | `role="status"` for screen reader announcements |
| ARIA | SVG is marked with `aria-hidden="true"` |
| Focus | Not focusable (decorative indicator) |
The Spinner includes `role="status"` which allows screen readers to announce when loading states change. For longer loading operations, consider providing additional context through accompanying text.
For more guidance on loading states and status updates, see [changing content best practices](https://anvil.servicetitan.com/docs/accessibility/changing-content.md).
## Code
**Implementation**
spinner-playground
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/spinner-playground?file=src/App.tsx)
```tsx lines expandable theme={null}
import { Spinner, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { Spinner } from "@servicetitan/anvil2";
function ExampleComponent() {
return ;
}
```
### Size variants
Spinners support three sizes: `small`, `medium` (default), and `large`.
```tsx theme={null}
import { Spinner } from "@servicetitan/anvil2";
function SizeExamples() {
return (
<>
);
}
```
spinner-size
[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/spinner-size?file=src/App.tsx)
```tsx lines expandable theme={null}
import { Spinner, Flex } from "@servicetitan/anvil2";
function App() {
return (
);
}
export default App;
```
### Inheriting color
Use the `inherit` prop to make the `Spinner` inherit the current text color, useful when placing spinners inline with text or inside buttons.
```tsx theme={null}
import { Spinner, Button } from "@servicetitan/anvil2";
function InheritExample() {
return (
);
}
```
### Custom sizing
Spinners can be sized using CSS width and height properties for cases where the preset sizes don't fit your needs.
```tsx theme={null}
import { Spinner } from "@servicetitan/anvil2";
function CustomSizeExample() {
return ;
}
```
**Spinner Props**
```tsx theme={null}
```
## `Spinner` Props
In addition to the props listed below, the `Spinner` component can accept any valid HTML `span` props.
**inherit** `boolean` (default: false)
When true, the spinner inherits the current text color instead of using the default primary background color.
**size** `"small" | "medium" | "large"` (default: medium)
The size of the spinner.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.