Spinner

Source

Theme Source

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#

import { Spinner } from "pearl-ui";

Usage#

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

Example#

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.

Component Properties#

Supported Style Properties#

The Spinner component supports these style properties:

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

Additional Properties#

The Spinner component also supports these additional properties:

Name	Required	Type	Default	Description
`size`	No	PearlTheme.components.Spinner["sizes"]	`"m"`	Defines the size of the spinner.
`variant`	No	"ball" \| "bar" \| "dot" \| "spinner" \| "pacman" \| "pulse" \| "skype" \| "activity" \| "wave"	`"spinner"`	Specifies the type of the spinner.
`isLoading`	No	boolean	`true`	Indicates the loading status of the `Spinner`. If `false`, the `Spinner` is removed from the DOM.
`isExpanded`	No	boolean	`false`	Determines if the Spinner spans the parent container and centers the spinner within.
`colorScheme`	No	PearlTheme["palette"]	`"primary""`	Sets the active color palette of the spinner.
`animationDuration`	No	number	`1200`	Sets the animation duration in milliseconds.
`rawSize`	No	number	`20`	Adjusts the size of the spinner.
`sizeMultiplier`	No	number	`1`	Adjusts the size of the spinner relative to its container.