View on GitHub


The Spinner component is used to indicate a loading state.

Basic example

<Spinner />
code Hide code

Changing the size

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

<Spinner size={16} />
code Hide code
<Spinner size={24} />
code Hide code
<Spinner size={32} />
code Hide code

Centering in a div

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

<Pane display="flex" alignItems="center" justifyContent="center" height={400}>
  <Spinner />
code Hide code

Centering with automatic margins

Alternatively you can center a Spinner with margins.

  <Spinner marginX="auto" marginY={120} />
code 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.

<Pane height={40}>
  <Spinner delay={300} />
code Hide code

Spinner Props

This component composes ui-box

delaynumber = 0
Delay after which spinner should be visible.
sizenumber = 40
The size of the spinner.
Theme provided by ThemeProvider.