Introduction

The Spinner component is used to indicate a loading state.

Basic example

<Spinner />

Changing the size

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

<Spinner size={16} />

<Spinner size={24} />

<Spinner size={32} />

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 />
</Pane>

Centering with automatic margins

Alternatively you can center a Spinner with margins.

<Pane>
  <Spinner marginX="auto" marginY={120} />
</Pane>

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} />
</Pane>