Components
Spinner
The Spinner component is used to indicate that content or an action is loading, and that the user must wait before they can continue.
React
Press Enter to start editing
const PreviewEn = () => { return <Spinner aria-label='Loading coffee' />; }; render(<PreviewEn />)
- aria-label
- Description
Accessibile label Defines a string value that labels the current element. @see aria-labelledby.
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | - | Accessibile label Defines a string value that labels the current element. @see aria-labelledby. |
Usage
Examples
Sizes
React
Press Enter to start editing
const SizesEn = () => { return ( <> <Spinner aria-label='Loading coffee' data-size='2xs' /> <Spinner aria-label='Loading coffee' data-size='xs' /> <Spinner aria-label='Loading coffee' data-size='sm' /> <Spinner aria-label='Loading coffee' data-size='md' /> <Spinner aria-label='Loading coffee' data-size='lg' /> <Spinner aria-label='Loading coffee' data-size='xl' /> </> ); }; render(<SizesEn />)
HTML
Append the class name ds-spinner to a <svg> tag to create a spinner.
The <svg> should have two <circle> elements inside it to create the spinner.
Check the code snippet below for the complete HTML structure.
CSS variables and data attributes
| Name | Value |
|---|---|
| --dsc-spinner-background | var(--ds-color-surface-tinted) |
| --dsc-spinner-stroke | var(--ds-color-border-default) |
| --dsc-spinner-animation-duration | 2s |
No relevant data attributes found.
Edit this page on github.com (opens in a new tab)