The Spinner component is used to indicate a loading state.

Basic example

Hide code

Changing the size

Try to stay on the 8px major scale grid, or in some cases the 4px minor scale grid.

Hide code
Hide code
Hide code

Centering in a div

Wrap your Spinner in a Pane to allow for centering of you Spinner.

Hide code

Centering with automatic margins

Alternatively you can center a Spinner with margins.

Hide code

Showing after delay

Add delay prop (in milliseconds) to show spinner only after this time is passed. Hide and then show code below to see this behavior in action.

Hide code

Spinner Props

This component composes ui-box

Delay after which spinner should be visible.
The size of the spinner.