react-spinkit
A collection of loading indicators animated with CSS for React
Currently I've ported all the spinner animations from Spinkit. If you have other favorite css spinner you'd like to include, open an issue.
Usage
var Spinner = require('react-spinkit');
<Spinner spinnerName='double-bounce' />See more examples on the demo page.
CSS
CSS is loaded automatically when using Webpack and the css-loader or Browserify/CSSify to build your project.
Webpack or Browserify is required
Currently we only support Browserify and Webpack. If you'd like support for other build tools that also support requiring CSS, PRs are welcome.
Fades in spinners after one second
According to research by Jakob Nielsen,
feedback after user operations isn't necessary for about a second so be
default, react-spinkit will fade in your spinner at one second.
You can disable spinner fade in by adding the noFadeIn prop e.g. <Spinner spinnerName='three-bounce' noFadeIn />
PropTypes
- spinnerName—specify spinner to use.
- noFadeIn—disable the initial fade-in of the spinner.
- overrideSpinnerClassName—change the default "spinner" className.