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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| accessibilityLabel | string | - | Text to describe what is happening while the loading spinner is active |
| alt | boolean | false | Flag to change the loading spinner color variant |
| color | string | "$loading-spinner.color.surface.spinner.regular" | Color of the loading spinner |
| heading | string | - | The heading of the spinner. Only available when size is set to "sm" |
| isLoading | boolean | false | Flag to show or hide the loading spinner. If true, spinner is visible |
| size | "xs" | "sm" | "sm" | Set the size of the spinner |
LoadingSpinner Classes
| Class Name | Description |
|---|---|
| abyss-loading-spinner-heading | Heading element |
| abyss-loading-spinner-root | Loading spinner root 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 |