Orbit

Spinner

Source

A simple loading indicator. Spinner ships with a built-in left margin for inline use, while SpinnerNoMargin is sizeable via className. Both inherit color from the current text color.

Spinner

The default spinner has a fixed size and a left margin, suited to sitting beside text.

<Spinner />

SpinnerNoMargin

Drops the margin and accepts className for sizing. Use it inside buttons, badges and tight layouts.

<SpinnerNoMargin />
<SpinnerNoMargin className="h-4 w-4" />
<SpinnerNoMargin className="h-8 w-8" />

Color

Both spinners draw with currentColor, so they take on the text color of their container. Set it with a Box color token.

<Box color="text-primary"><SpinnerNoMargin /></Box>
<Box color="text-secondary"><SpinnerNoMargin /></Box>
<Box color="text-success"><SpinnerNoMargin /></Box>
<Box color="text-danger"><SpinnerNoMargin /></Box>

Inline with text

Spinner reads well next to a label thanks to its built-in margin.

Loading

Props

className

stringdefault: 'h-5 w-5'

SpinnerNoMargin only. Sets the size and any extra classes. Spinner itself takes no props and ships with a fixed size and left margin.