react-spinners-css

React Spinners CSS Loaders

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

🚀 List of components

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

Props

Prop	Type	Default
color	string	#7f58af

💻 Installation and Usage Examples

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>
   )
}

👾 Development

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.

⌨️ Contributing

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

Steps to contribute

• Fork the project and clone.
• 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.
• The spinner need to be exported with index file inside the spinner folder, so create index.js file to export your spinner.
• Add the spinner in index.js file inside components folder.
• Run npm run build to generate the build folder folder.
• Share with the community by submitting a PR.

📄 License

MIT