---
title: Spinner
description: Render a loading indicator
name: spinner
component: Spinner
package: spinner
demoName: Spinner
---

<HeroContainer>
  <SpinnerDemo />
</HeroContainer>

```tsx hero template=Spinner

```

<Highlights
  features={[
    'Custom size "small" or "large".',
    'Accepts all theme colors.',
    'Accepts all YStack props.',
  ]}
/>

## Installation

Spinner is already installed in `tamagui`, or you can install it independently:

```bash
npm install @tamagui/spinner
```

Note that due to the fact that Spinner is an extension of React Native [ActivityIndicator](https://reactnative.dev/docs/activityindicator), and that only accepts size `small` or `large`, we are currently limited to just these sizes.

## Usage

```tsx
import { Button, Spinner } from 'tamagui'

export default () => <Spinner size="large" color="$green10" />
```

## API Reference

### Spinner

Spinner extends [YStack](/docs/components/stacks), getting [Tamagui standard props](/docs/intro/props), plus:

<PropsTable
  data={[
    {
      name: 'size',
      required: false,
      type: '"small" | "large"',
      description: `Size of the spinner.`,
    },
    {
      name: 'color',
      required: false,
      type: 'string | ColorTokens',
      description: `Gives the spinner a color.`,
    },
  ]}
/>