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>

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

Spinner

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