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
An aria-label
must be provided for accessibility.
If the Spinner is labeled by a separate element, such as a <Text>
component communicating loading status, an `aria-labelledby`` prop must be provided using the id of the labeling element instead.
If using the inverse
appearance variant, ensure the background offers enough contrast for the Spinner to be legible and meets color contrast guidelines.