Returnless UI

Spinner ​

Spinners are used to notify users that their action is being processed. For loading state, spinners should only be used for content that can't be represented with skeleton loading components, like for data charts.

Props
accessibilityLabel?:
string
Defaults to undefined
Accessible label for the spinner.
hasFocusableParent?:
boolean
Defaults to false
Allows the component to apply the correct accessibility roles based on focus.
variant?:
"dark" | "light"
Defaults to "dark"
The variant of the spinner.

Usage ​

js
<script lang="ts" setup>
import { Spinner } from '@returnless/focus-ui';
</script>

<template>
  <Spinner />
</template>

Spinner on dark background ​

js
<script lang="ts" setup>
import { Spinner } from '@returnless/focus-ui';
</script>

<template>
  <Spinner variant="light" />
</template>

Accessibility ​

SVGs are often conveyed inconsistently to assistive technologies. The Spinner component's accessibility is also highly contextual. When the parent component is focusable, you'll need to set the hasFocusableParent prop for the appropriate role attribute to be applied.

For optimal user experience, use the accessibilityLabel prop to let assistive technology users know the purpose of the spinner.

Best practices ​

The spinner component should:

  • Notify users that their request has been received and the action will soon complete.
  • Not be used to give feedback for an entire page load.

Content guidelines ​

Spinner accessibility labels should:

  • Accurately explain the state of the requested action. For example, "Loading", "Submitting", or "Processing".
  • Use as few words to describe the state as possible.