JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 47508
  • Score
    100M100P100Q148644F
  • License MIT

A collection of loading indicators animated with CSS for React

Package Exports

  • react-spinkit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-spinkit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

Install

$ npm install react-spinkit --save

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 with the css-loader and style-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 by 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.

Demo and documentation

http://kyleamathews.github.io/react-spinkit/