React-Spinkit

Browse code on GitHub


Spinkit Spinners

<Spinner name="circle" />
<Spinner name="circle" color="orange"/>



<Spinner name="cube-grid" />
<Spinner name="cube-grid" color="blue"/>



<Spinner name="wave" />
<Spinner name="wave" color="fuchsia"/>



<Spinner name="folding-cube" />
<Spinner name="folding-cube" color="aqua"/>



<Spinner name="three-bounce" />
<Spinner name="three-bounce" color="fuchsia"/>



<Spinner name="double-bounce" />
<Spinner name="double-bounce" color="blue"/>



<Spinner name="wandering-cubes" />
<Spinner name="wandering-cubes" color="purple"/>



<Spinner name="chasing-dots" />
<Spinner name="chasing-dots" color="green"/>



<Spinner name="rotating-plane" />
<Spinner name="rotating-plane" color="green"/>



<Spinner name="pulse" />
<Spinner name="pulse" color="steelblue"/>



<Spinner name="wordpress" />
<Spinner name="wordpress" color="green"/>



loaders.css Spinners

(not all of these center here, but are easily centerable with flexbox)
<Spinner name="ball-grid-beat" />
<Spinner name="ball-grid-beat" color="green"/>



<Spinner name="ball-grid-pulse" />
<Spinner name="ball-grid-pulse" color="coral"/>



<Spinner name="line-spin-fade-loader" />
<Spinner name="line-spin-fade-loader" color="blue"/>



<Spinner name="ball-spin-fade-loader" />
<Spinner name="ball-spin-fade-loader" color="steelblue"/>



<Spinner name="ball-pulse-rise" />
<Spinner name="ball-pulse-rise" color="steelblue"/>



<Spinner name="line-scale" />
<Spinner name="line-scale" color="fuchsia"/>



<Spinner name="line-scale-pulse-out" />
<Spinner name="line-scale-pulse-out" color="goldenrod"/>



<Spinner name="line-scale-pulse-out-rapid" />
<Spinner name="line-scale-pulse-out-rapid" color="green"/>



<Spinner name="pacman" />
<Spinner name="pacman" color="orange"/>



<Spinner name="line-scale-party" />
<Spinner name="line-scale-party" color="olive"/>



<Spinner name="ball-triangle-path" />
<Spinner name="ball-triangle-path" color="coral"/>



<Spinner name="ball-scale-multiple" />
<Spinner name="ball-scale-multiple" color="purple"/>



<Spinner name="ball-scale-ripple-multiple" />
<Spinner name="ball-scale-ripple-multiple" color="red"/>



<Spinner name="ball-pulse-sync" />
<Spinner name="ball-pulse-sync" color="aqua"/>



<Spinner name="ball-beat" />
<Spinner name="ball-beat" color="red"/>



<Spinner name="ball-zig-zag" />
<Spinner name="ball-zig-zag" color="red"/>



<Spinner name="ball-zig-zag-deflect" />
<Spinner name="ball-zig-zag-deflect" color="fuchsia"/>



<Spinner name="ball-clip-rotate-pulse" />
<Spinner name="ball-clip-rotate-pulse" color="blue"/>



<Spinner name="ball-clip-rotate-multiple" />
<Spinner name="ball-clip-rotate-multiple" color="blue"/>



<Spinner name="ball-clip-rotate" />
<Spinner name="ball-clip-rotate" color="fuchsia"/>



<Spinner name="ball-scale-ripple" />
<Spinner name="ball-scale-ripple" color="olive"/>



<Spinner name="triangle-skew-spin" />
<Spinner name="triangle-skew-spin" color="green"/>



Spinner Options

<Spinner name="wordpress" fadeIn="none" />


<Spinner name="wordpress" fadeIn="quarter" />


<Spinner name="wordpress" fadeIn="half" />


<Spinner name="wordpress" overrideSpinnerClassName="my-class-to-override" />



<Spinner name="wordpress" className="my-class" />


<Spinner name="wordpress" color="green" />