Spinner

The Spinner component is the used to provide a visual cue that an action is either processing, awaiting a course of change or a result.

Import#

import { Spinner } from "pearl-ui";

Usage#

// default variant is set as "spinner" and size is set as "m" in the default Pearl theme<Spinner />

Spinner sizes#

Use the size prop to change the size of spinner used. You can set the value to the keys available in PearlTheme.components.Spinner["sizes"], which are "s", "m", "l", and "xl" in the default theme.

//  size="l" refers to the value of `theme.components.Spinner["sizes"]["l"]`<Spinner size="l" />

Spinner variants#

Use the variant prop to change the type of spinner used. You can set the value to "ball", "bar", "dot", "spinner", "pacman", "pulse", "skype", "activity", and "wave".

// variant="ball" refers to the value of `theme.components.Spinner["variants"]["ball"]`<Spinner variant="ball" />

Override Style#

The Spinner component also supports a variety of style props which can be used to override the pre-defined variant style in the theme. Manual style props passed into the component have a higher precedance than the default component style.

// passing style prop color="danger.500" overrides the default component style value of color="primary.500"<Spinner color="danger.500" variant="dot" />

Example#

info

The Spinner component doesn't work on Expo web as the animation gets cut off after a few seconds. Please run the following example on either an Android or iOS device.

Light
Dark

Embed not loading? Click here

Accessibility#

Spinner has the role of progressbar.
Spinner has the default label set as "Loading indicator". A custom label can be specified using the accessibilityLabel prop.

Props#

Supported style props#

The Spinner component supports the following style props:

color (Only the color prop is supported, not the backgroundColor props)
margin and padding
layout

Additional props#

Name	Required	Type	Default	Description
size	false	PearlTheme.components.Spinner["sizes"]	`"m"`	Size of the spinner.
variant	false	"ball" \| "bar" \| "dot" \| "spinner" \| "pacman" \| "pulse" \| "skype" \| "activity" \| "wave"	`"spinner"`	Type of the spinner.
isLoading	false	boolean	`true`	The loading status of the `Spinner`. If `false`, the `Spinner` component is removed from the DOM.
isFullScreen	false	boolean	`false`	Spinner container takes the entire screen size and centers the spinner within.
animationDuration	false	number	`1200`	Animation duration in ms.
animating	false	boolean	`true`	Toggles the animation status.
accessibilityLabel	false	string		The accessibility label of the spinner

Default Component Style#

export default {  baseStyle: {    color: "primary.500",    animationDuration: 1200,    animating: true,  },  sizes: {    s: {      spinnerSize: 10,    },    m: {      spinnerSize: 15,    },    l: {      spinnerSize: 20,    },    xl: {      spinnerSize: 30,    },  },  variants: {    ball: { count: 8 },    bar: { count: 3 },    dot: {      sizeMultiplier: 0.2,      count: 4,    },    spinner: {      animationDuration: 3600,    },    pacman: {},    pulse: {},    skype: { count: 5, minScale: 0.2, maxScale: 1.0 },    activity: { count: 12 },    wave: { count: 4, waveFactor: 0.54, waveMode: "fill" },  },  defaults: {    size: "m",    variant: "spinner",  },};