Skip to main content


The Spinner component is a visual indicator used to signify that an action is in progress, awaiting a change, or waiting for a result. It is a crucial part of user interface design, providing feedback to users about the status of ongoing processes.


import { Spinner } from "pearl-ui";


The default variant of the Spinner component is set as "spinner" and the size is set as "m" in the default Pearl theme. Here's how you can use it:

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

Spinner Sizes#

The size prop allows you to adjust the size of the spinner. You can set the value to the keys available in PearlTheme.components.Spinner["sizes"], which are "xs", "s", "m", and "l" in the default component configuration.

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

Spinner Variants#

The variant prop allows you 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#

The colorScheme prop allows you 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#

The isLoading prop allows you to control when to show the loading spinner. This is useful 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">  {loading ? <Spinner isExpanded isLoading={loading} /> : <Text>I am visible!</Text>}</Box>

In the example above, 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.

Overriding Styles#

The Spinner component 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 precedence than the default component configuration.

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



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

Component Properties#

Supported Style Properties#

The Spinner component supports these style properties:

Additional Properties#

The Spinner component also supports these additional properties:

sizeNoPearlTheme.components.Spinner["sizes"]"m"Defines the size of the spinner.
variantNo"ball" | "bar" | "dot" | "spinner" | "pacman" | "pulse" | "skype" | "activity" | "wave""spinner"Specifies the type of the spinner.
isLoadingNobooleantrueIndicates the loading status of the Spinner. If false, the Spinner is removed from the DOM.
isExpandedNobooleanfalseDetermines if the Spinner spans the parent container and centers the spinner within.
colorSchemeNoPearlTheme["palette"]"primary""Sets the active color palette of the spinner.
animationDurationNonumber1200Sets the animation duration in milliseconds.
rawSizeNonumber20Adjusts the size of the spinner.
sizeMultiplierNonumber1Adjusts the size of the spinner relative to its container.