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.
#
Importimport { Spinner } from "pearl-ui";
#
Usage// default variant is set as "spinner" and size is set as "m" in the default Pearl theme<Spinner />
#
Spinner sizesUse the size
prop to change the size of spinner. You can set the value to the keys available in
<Spinner size="s" />
<Spinner size="m" />
<Spinner size="l" />
<Spinner size="xl" />
#
Spinner variantsUse the variant
prop to change the type of spinner used. You can set the value to
<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 schemeUse the colorScheme
prop to change the color palette of the spinner.
You can set the value only to the keys available in
<Spinner colorScheme="primary" />
<Spinner colorScheme="success" />
<Spinner colorScheme="warning" />
<Spinner colorScheme="info" />
<Spinner colorScheme="danger" />
#
Representing loading state for componentsUse 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 StyleThe 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#
Accessibility- Spinner has the
role
ofprogressbar
. - Spinner has the default label set as
"Loading indicator"
. A custom label can be specified using theaccessibilityLabel
prop.
#
Props#
Supported style propsThe Spinner component supports the following style props:
- color (Only the
color
prop is supported, not thebackgroundColor
props) - margin and padding
- layout
- position
#
Additional propsName | Required | Type | Default | Description |
---|---|---|---|---|
size | false | "m" | Size of the spinner. | |
variant | false | "spinner" | Type of the spinner. | |
isLoading | false | true | The loading status of the Spinner . If false , the Spinner component is removed from the DOM. | |
isExpanded | false | false | Whether the Spinner spans the parent container and centers the spinner within. | |
colorScheme | false | "primary"" | Active color palette of the spinner. | |
animationDuration | false | 1200 | Animation duration in ms. |
#
Default Component Configexport 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", },};