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 {Spinner} from '@fuegokit/react'


Brand spinner


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.

See also