react-loader-spinner-svg v1.0.2

react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

This is originally a fork from https://github.com/mhnpd/react-loader-spinner

Installation

Using NPM:

$ npm install react-loader-spinner --save

Using yarn

$ yarn add react-loader-spinner

Import required css

 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"

Demo

View in page

Usage

 import Loader from 'react-loader-spinner'
 export default class App extends React.Component {
  //other logic
    render() {
	 return(
	  <Loader
	     type="Puff"
	     color="#00BFFF"
	     height={100}
	     width={100}
	     timeout={3000} //3 secs
		 svgClass="my-custom-class"
	  />
	 );
    }
 }

If webpack throw issue with css. (For older version of this package)

Change webpack config as: test: /\.scss$/ to test: /\.s?css$/ Newer version just import css file from node modules to app.js

Types of Spinner

react-loader-spinner component has following types of spinner.

There are more. View storybook to see all list.

PropTypes Available

react-loader-spinner component accept following props. Instructions on how to use them are below.

TODO LIST

• Change Docs on Storybooks
• Optimize css implementation
• Add support for Typescript.
• Optimization for multiple color support.

License

MIT