Spinner

The Spinner shows an asynchronous operation is in progress

Examples

Contents

UsageAPIs

Usage

Spinners can be used to show an asynchronous operation is executing.

Do

Use a LoadingCell in Dropdowns to show loading, these will render a Spinner for you.

Don't

Use Spinners in tables. Instead, return obervables with an undefined value to render shimmer rows.

APIs

SpinnerSize

xSmall"xsmall"
string
12px diameter
small"small"
string
16px diameter
medium"medium"
string
20px diameter
large"large"
string
28px diameter

SpinnerOrientation

row0
number
When a label is used render the label and animation in a row (label to the right).
column1
number
When a label is used render the label and animation in a column (label below).

ISpinnerProps

ariaLabel
string
Optional aria-label
ariaLivepolite
"off" | "assertive" | "polite"
Optional aria-live value
className
string
Optional custom classname
id
string
Id for the spinner
label
string
Optional label text
orientationcolumn
Optional orientation when a label is used.
sizeSpinnerSize.medium
Optional spinner size

Loaded Spinner page