react-spinners-css

react-spinners-css

Amazing css spinner for ajax or loading animation from loading.io.
What is this project?
I see that loadingio pure css is only built for normal HTML website, and I want to use it for some React project, so I decide to take this project and convert it to React components library and add some features like a color option for each spinner.

Install loading io spinner for React with npm

Run the following command:

npm install react-spinners-css

Play and install loading io spinner for React with Bit

Using bit to play with live demo, and try loading io spinner before install.

Install specific loadingio spinner component with bit using npm or yarn without having to install the whole project

set npm regisetry config(one time action):

npm config set '@bit:registry' https://node.bit.dev

and use your favorite package manager:

bit import joshk.react-spinners-css/ripple 
npm i @bit/joshk.react-spinners-css.ripple
yarn add @bit/joshk.react-spinners-css.ripple

API

Components

• <Circle/>
• <Default/>
• <DualRing/>
• <Ellipsis/>
• <Facebook/>
• <Grid/>
• <Heart/>
• <Hourglass/>
• <Ring/>
• <Ripple/>
• <Roller/>
• <Spinner/>

Props

Prop	Type	Default
color	string	#fff

Usage Examples

Using npm, bit:

import { Roller } from 'react-spinners-css';
import Ripple from '@bit/joshk.react-spinners-css.ripple';
...
render() {
   return(
     <div>
       <Roller /> //default color is white
       <Roller color="black" />
       <Roller color="#000" />
       <Ripple /> //default color is white
       <Ripple color="black" />
       <Ripple color="#000" />
     </div>
   )
}

License

MIT