React Spinners CSS Loaders

Amazing collection of pure CSS react spinners components of css spinners for ajax or loading animation based on loading.io.

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

Using npm to install react-spinners-css:

$ npm i --save react-spinners-css

import { Circle, Facebook } from "react-spinners-css";
...
render() {
   return(
     <div>
       <Circle /> //default color is #7f58af
       <Circle color="red" />
       <Facebook /> //default color is #7f58af
       <Facebook color="red" />
     </div>
   )
}

You can see the components locally by cloning this repo and doing the following steps:

• Install dependencies from package.json, run: npm install
• Run the app in the development mode, run: npm run start.

• Pull requests and ⭐ stars are always welcome
• For bugs and feature requests, please create an issue

Steps to contribute

1. Fork the project and clone.
2. Create spinner folder in this folder, name the folder with upper case, and create index file and css file. See example of naming in this folder folder.
3. The spinner need to be exported with index file inside the spinner folder, so create index.js file to export your spinner.
4. Add the spinner in index.js file inside components folder.
5. Run npm run build to generate the build folder folder.
6. Share with the community by submitting a PR.

MIT