InlineSpinner

A spinner is a visual indicator of an ongoing, user-initiated process. Place the spinner where you want to focus users’ attention when the process completes. Provide a brief description of the process, for example, “Loading…”. Inline spinners are used for showing the progress of an operation related to a specific component (buttons, etc...) and the default size is 24x24 pixels.

To improve the perceived performance of the application, the inline spinner should only be shown when the operation takes more than 200 milliseconds. Additionally it is recommended that the verb on the component should change to the gerund form.

Properties

NameTypeDefault
size

"small" | "medium"

Set the size of the component
"medium"
color

Color | string

Override the color of the spinning circle
-

The InlineSpinner supports margin styled-system props.

Examples

Combinations

size="small"

size="medium"