Spinner

An indeterminate loading indicator.

Button renders one for you when loading is set, so a button does not need one passed in.

When you know how much is left, use Progress instead.

Installation

Spinner ships with the library — no separate install.

import { Spinner, Button } from 'panelui-native';

Or copy the source into your project, to own and edit it:

npx panelui-cli@latest add spinner

Usage

<Spinner />
<Spinner size="lg" />

Examples

Inline

<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />

Centred in a screen

<View className="flex-1 items-center justify-center">
  <Spinner size="lg" />
</View>

Inside a button

You rarely need this — Button’s own loading prop inserts a variant-matched spinner for you.

<Button loading={saving}>Save</Button>

In another colour

color sets the turning arc and trackColor the faint ring behind it. Left unset they follow the theme's primary and muted colours.

Set them where the spinner sits on a surface the theme did not choose for it — a filled button, a photo, a coloured banner. There it wants the colour of the text around it, and the track wants to fade into the surface rather than read as a second spinner.

<Spinner color="#FFFFFF" />

// On a coloured surface, fade the track into it as well.
<View className="rounded-xl p-4" style={{ backgroundColor: brand }}>
  <Spinner color="#FFFFFF" trackColor="rgba(255,255,255,0.25)" />
</View>

Naming the wait

A spinner alone on a screen is the only thing announcing it, so give it words.

<View className="flex-1 items-center justify-center">
  <Spinner size="lg" label="Loading your dashboard" />
</View>

Variants

`size`

sm
md (default)
lg

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

API Reference

Prop	Type	Default	Description
`className`	`string`	—
`label`	`string`	—	What is loading, for a screen reader. Setting it makes the spinner announce as a busy status; leaving it unset keeps it out of the accessibility tree. Leave it unset wherever something around the spinner already says the wait is on — a loading button, a row with its own caption. Set it where the spinner is the only sign, or the wait passes in silence.
`color`	`string`	—	The colour of the turning arc. Any colour React Native accepts — a hex string, `rgb()`, a named colour. Leave it unset to follow the theme's primary colour. Set it where the spinner sits on a surface the theme did not choose for it: a spinner on a filled button, or over a photo, wants the colour of the text around it rather than the accent.
`trackColor`	`string`	—	The colour of the faint ring the arc turns around. Leave it unset for the theme's muted colour. Worth setting alongside `color` on a dark or coloured surface, where the default ring can read as a second, fainter spinner rather than as a track.

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Notes

A bare ring carries no words, so it is hidden from screen readers unless label is given. An unnamed progress indicator announces its role and nothing else, which is noise standing in for information.

Leave label off wherever something around the spinner already says the wait is on — Button's loading state, a row with its own caption. Set it where the spinner is the only sign.

Under the platform's reduce-motion setting the ring stops turning and fades in place instead. It keeps moving because a spinner that holds still reads as one that has hung, which is the single thing a spinner exists to rule out.

Public exports

Values: Spinner

Types: SpinnerProps

Spinner

On this page