import { LoadingSpinner } from '@uhg-abyss/mobile';Overview
Loading Spinner requires the accessibilityLabel prop to describe what happens while the loading spinner is active. Common labels are 'Submitting Form', 'Downloading Files', 'Content is loading', etc. Be as descriptive as possible.
<LoadingSpinner accessibilityLabel="Downloading" isLoading={isLoading} />Size
Loading spinner comes in two sizes, xs and sm. With the xs variant being used solely for use on buttons.
Color
The color property allows changing the color of the loading spinner.
Alt
The alt property changes the color of the loading spinner.
Heading
Use the heading prop to add text below the spinner. Only available when the size is set to 'sm'.
Button
The Button component has LoadingSpinner integration. Head over to the Button component documentation to learn more.
LoadingSpinner Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
alt | boolean | undefined | false | - | Set the color of the spinner to the alt variant |
color | Abyss.Color | undefined | - | - | Set the color of the spinner |
heading | string | undefined | - | - | Set the heading of the spinner |
isLoading | boolean | undefined | false | - | Set loading state of the spinner |
size | 'xs' | 'sm' | undefined | 'sm' | - | Set the size of the spinner |
LoadingSpinner Classes
| Class Name | Description |
|---|---|
| abyss-loading-spinner-root | Loading spinner root element |
| abyss-loading-spinner-heading | Heading element |
LoadingSpinner Translations
| Translation Key | Value |
|---|---|
| loading | Loading |
Following the requirements of WAI-ARIA, Loading Spinner follows the requirements 4.1.3: Status Messages. Status messages are defined by WCAG as messages that provide information on the success or results of a user action, but do not change the user's context (i.e., take focus).
Loading Spinner is programmed through the accessibilityLabel property, and has been tested using a screen reader to present a status message to assistive technology without receiving focus.
Adheres to the Status messages WAI-ARIA design pattern.
Dynamic Type
LoadingSpinner does not scale. If the size prop is set to "xs" and dynamic type scales past 3XL, then size will adjust to "sm".
LoadingSpinner Tokens
| Token Name | Value | |
|---|---|---|
| loading-spinner.color.surface.spinner.regular | #002677 | |
| loading-spinner.color.surface.spinner.alt | #FFFFFF | |
| loading-spinner.color.text.heading.regular | #4B4D4F | |
| loading-spinner.color.text.heading.alt | #FFFFFF | |
| loading-spinner.sizing.all.sm | 36 | |
| loading-spinner.sizing.all.xs | 20 | |
| loading-spinner.spacing.gap.vertical.sm.container | 12 |
LoadingSpinner Classes
| V2 | V1 | Status |
|---|---|---|
| - | loading-spinner-background | Removed |
| loading-spinner-heading | - | Added |
| - | loading-spinner-label | Removed |
| loading-spinner-root | loading-spinner-root | Unchanged |
| - | loading-spinner-wheel | Removed |
LoadingSpinner Props
| V2 | V1 | Status |
|---|---|---|
| alt | - | Added |
| - | children | Removed |
| color | color | Unchanged |
| heading | label | Renamed |
| isLoading | isLoading | Unchanged |
| size | size | Modified |