Spinner

A spinner is used to indicate to users that an action is in progress. For actions that may take a long time, use a progress bar instead.

Examples

Basic

Size variations

Custom size

Inline size

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.

Second level

Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti.

Sometimes you need small text

Props

Spinner

*required
Name	Type	Default	Description
aria-label	string		Accessible label to describe what is loading
aria-labelledBy	string		Id of element which describes what is being loaded
aria-valuetext	string	'Loading...'	Text describing that current loading status or progress
className	string	''	Additional classes added to the Spinner.
diameter	string		Diameter of spinner set as CSS variable
isInlineBeta	boolean	false	Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'xl'	Size variant of progress.

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub