# @fluentui/react-spinner

> Spinner component for Fluent UI React

Latest version **9.8.6** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-spinner
pnpm add @fluentui/react-spinner
yarn add @fluentui/react-spinner
bun add @fluentui/react-spinner
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.8.6 |
| Published | 2026-09-21 |
| First published | 2022-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 251 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20293 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-spinner
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-spinner

## Dependencies (7)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-label](https://npm.io/package/@fluentui/react-label.md) ^9.4.5
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4

## Recent versions

- 9.8.6 (latest) — 2026-09-21
- 0.0.0-nightly-20261002-0407.1 (nightly) — 2026-10-02
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 9.0.0-rc.6 (rc) — 2022-06-21
- 9.0.0-beta.9 (beta) — 2022-05-05
- 0.0.0-nightly-20260929-0404.1 — 2026-09-29
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- … 1188 more at https://npm.io/package/@fluentui/react-spinner/versions

## README

# @fluentui/react-spinner

**Spinner components for [Fluent UI React](https://react.fluentui.dev/)**

The Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinners are typically indeterminate progress indicators that is used when it is unknown how long a task will take to complete. They can be various sizes, located inline with content or centered. They generally appear while an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task.

## Usage

To import Spinner:

```js
import { Spinner } from '@fluentui/react-components';
```

### Examples

```js
<Spinner label="Loading..." />
<Spinner label="Loading..." appearance="inverted" />
<Spinner label="Loading..." size="large" />
```

See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.

Alternatively, run Storybook locally with:

1. `yarn start`
2. Select `react-spinner` from the list.

#### Rendering Spinner without the animated circle

You can directly override the Spinner slot to render a Spinner without the animated circle, as shown below

```js
<Spinner spinner={null} appearance="primary" label="Primary Spinner" />
<Spinner spinner={{style:{visibility: 'hidden'}}} appearance="inverted" label="Inverted Spinner" />
```

### Specification

See [SPEC.md](./SPEC.md).

### Migration Guide

If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Spinner implementation.

---
_Source: https://npm.io/package/@fluentui/react-spinner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._