---
title: Spinner
category: Indicators
---

```jsx live
render(
  <StackView axis="horizontal" spacing={1}>
    {['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => (
      <Spinner key={size} size={size} color="primary" />
    ))}
  </StackView>
)
```

```jsx live
render(
  <StackView axis="horizontal" spacing={1}>
    <Spinner size="sm" thickness={1} color="primary" />
    <Spinner size="sm" thickness={4} color="primary" />
    <Spinner size="sm" thickness={8} color="primary" />
    <Spinner size={3} thickness={1} color="primary" />
    <Spinner size="24px" thickness={4} color="primary" />
    <Spinner size="lg" thickness={8} color="primary" />
  </StackView>
)
```

```jsx live
render(
  <ThemeProvider
    theme={{
      spinner: {
        color: 'foregroundTertiary',
        sizes: { sm: 4, md: 6, lg: 8 },
        thickness: { sm: 1, md: 1, lg: 1 },
        trackColor: 'surfaceTertiary',
      },
    }}
  >
    <StackView axis="horizontal" spacing={1}>
      {['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => (
        <Spinner key={size} size={size} color="primary" />
      ))}
    </StackView>
  </ThemeProvider>
)
```