Spinner

Stable

Spinners communicate progress and let people know that an action is being processed

Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Spinners show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.

Spinners don't provide details about what is happening on the back-end, but they reassure people that a user-performed action is being processed.

Use a Spinner whenever the wait time is anticipated to be longer than three seconds.

Import

import {Spinner} from '@fuegokit/react'

Usage

Brand spinner

Accessibility

Loading indicators need to be accessible to assistive technologies.

An aria-label must be provided for accessibility.

This example demonstrates how to use an aria-label with a Spinner:

If the Spinner is labeled by a separate element, such as a text element communicating loading status, an aria-labelledby prop must be provided using the id of the labeling element instead.

This example demonstrates how you can use the aria-labelledby property on a Spinner with the id property on a loading Text element; the text element is inside of a VisuallyHidden component.

<Box>
  <VisuallyHidden>
    <Text id={'Loading'}>Loading</Text>
  </VisuallyHidden>
  <Spinner aria-labelledby="Loading" />
</Box>

If using the inverse appearance variant, ensure the background offers enough contrast for the Spinner to be legible and meets color contrast guidelines.

Do

<Box sx={{backgroundColor: 'background.accent.blue.bolder'}}><Spinner appearance={'invert'} aria-label='loading' /></Box>

Do

Use an appropriate background color from `@fuegokit/tokens`, to achieve a minimum contrast ratio of at least 4.5:1 with `inverse` Spinners.

Don't

<div style={{backgroundColor: 'peachpuff'}}><Spinner appearance={'invert'} aria-label='loading' /></div>