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. 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.

<Spinner size="s" />
<Spinner size="m" />
<Spinner size="l" />
<Spinner size="xl" />

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".

<Spinner variant="activity" />
<Spinner variant="ball" />
<Spinner variant="bar" />
<Spinner variant="dot" />
<Spinner variant="pacman" />
<Spinner variant="pulse" />
<Spinner variant="skype" />
<Spinner variant="spinner" />
<Spinner variant="wave" />

Spinner color scheme#

Use the colorScheme prop to change the color palette of the spinner.

You can set the value only to the keys available in PearlTheme.palette that contain a palette of colors represented as an object, which are "primary", "secondary", "neutral", etc in the default Pearl theme.

<Spinner colorScheme="primary" />
<Spinner colorScheme="success" />
<Spinner colorScheme="warning" />
<Spinner colorScheme="info" />
<Spinner colorScheme="danger" />

Representing loading state for components#

Use the isLoading prop to decide when to show the loading spinner. This is helpful when you want to show a loading state on any component based on some dynamic value.

The isExpanded prop can also be used to span the spinner across the parent container while the content is not visible.

const [loading, setLoading] = useState(true)
useEffect(() => {  setTimeout(() => {    setLoading(false)  }, 2000)}, [])
<Box w={200} h={200} backgroundColor="neutral.100">  <Spinner isExpanded isLoading={loading} />  {!loading && <Text>I am visible!</Text>}</Box>

Here, as soon as the screen loads, the Text component would be invisible for 2 seconds while the Spinner is animating. After 2 seconds, the Spinner gets removed from the DOM and the Text component is rendered.

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 config.

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

Example#

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
position

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.
`isExpanded`	false	boolean	`false`	Whether the Spinner spans the parent container and centers the spinner within.
`colorScheme`	false	PearlTheme["palette"]	`"primary""`	Active color palette of the spinner.
`animationDuration`	false	number	`1200`	Animation duration in ms.

Default Component Config#

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: {      animationDuration: 1600,      count: 5,      minScale: 0.2,      maxScale: 1.0,    },    activity: { count: 12 },    wave: {      animationDuration: 1600,      count: 4,      waveFactor: 0.54,      waveMode: "fill",    },  },  defaults: {    size: "m",    variant: "spinner",  },};