Spinner

Spinner is a loading component used to display loading states for our various components. Use anytime you want to indicate the application is loading in some way. This component is used for the isLoading state of the Button component.

Import

import
{
Spinner
}
from
'@blockstack/ui'
;

Usage

Add aria-busy="true" to the component that triggered the loading state while the spinner is shown.

Preview
Loading...
Loading...
Loading...
Loading...
Editable example

Props

The Spinner composes the Box component so you can pass props for Box. These are props related to the Spinner component.

NameTypeDefaultDescription
size?SpinnerSizemdThe size of the spinner. See type definition.
emptyColor?stringThe color of the empty area in the spinner.
color?stringcurrentColorThe color of the spinner.
thickness?string2pxThe thickness of the spinner.
speed?string0.85sThe speed of the spinner animation.
label?stringLoading...For accessibility, it's important to add a fallback loading text.
On this page