Spinner

import

import { Spinner } from '@bone-ui/spinner'

Basic

Loading...

<Spinner />

<Spinner />

LIVE DEMO

Colors

Loading...

<Box toCenterY spaceX4> <Spinner gray400 /> <Spinner red400 /> <Spinner green500 /> <Spinner blue600 /> </Box>

<Box toCenterY spaceX4>
  <Spinner gray400 />
  <Spinner red400 />
  <Spinner green500 />
  <Spinner blue600 />
</Box>

LIVE DEMO

Sizes

Loading...

<Box toCenterY spaceX4> <Spinner gray400 square-16 /> <Spinner red400 square-24 /> <Spinner green500 square-32 /> <Spinner blue600 square10 /> </Box>

<Box toCenterY spaceX4>
  <Spinner gray400 square-16 />
  <Spinner red400 square-24 />
  <Spinner green500 square-32 />
  <Spinner blue600 square10 />
</Box>

LIVE DEMO

Customize Child

Loading...

<Box toCenterY spaceX4> <Spinner orange500> <SunOutline></SunOutline> </Spinner> <Spinner teal600> <CashOutline></CashOutline> </Spinner> </Box>

<Box toCenterY spaceX4>
  <Spinner orange500>
    <SunOutline></SunOutline>
  </Spinner>
  <Spinner teal600>
    <CashOutline></CashOutline>
  </Spinner>
</Box>

LIVE DEMO

Speed

Loading...

<Spinner speed="0.2s"></Spinner>

<Spinner speed="0.2s"></Spinner>

LIVE DEMO