react-loader-spinner

by mhnpd

Collection set of react-spinner for async operation

271 Stars 56 Forks Last release: almost 2 years ago (2.2.0) MIT License 159 Commits 5 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

title

react-spinner-loader
provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.

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

If webpack throws 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 the following types of spinners.

| Spinner Type | Implementation | | ------------- | ----------------------------------------------------------------------- | | Audio |

       |
| Ball-Triangle | 
 |
| Bars          | 
         |
| Circles       | 
       |
| Grid          | 
         |
| Hearts        | 
       |
| Oval          | 
         |
| Puff          | 
         |
| Rings         | 
        |
| TailSpin      | 
     |
| ThreeDots     | 
    |

There are more. View [demo] to see the full list.

PropTypes Available

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

| name | types | default | Detail | | -------------- | ----------------- | ------------ | ------------------------------------------------------------------------------- | | visible | String or boolean | false | Show/ Hide the loader as required. | | type | String | "Audio" | Type of spinner you want to display. View the type in Types of Spinner section. | | height | Number | 80 | Height props define the height of the svg spinner. Default height is 80px. | | width | Number | 80 | Width props define the width of the spinner. | | color | String | "Blue" | color props is add color to the spinner | | secondaryColor | String | "Grey" | secondaryColor props for now is available on Plane and MutatingDots loaders | | timeout | Number | 0 | Duration in miliseconds after which spinner is disabled | | radius | Number | value varies | Set radius if the loader has a circle element in it |

Here are the list of the task for which we want PR:

  • Optimize css implementation
  • Add support for Typescript.
  • Optimization for multiple color support.

License

MIT

[svg-loader]: 
[here]: 
[View in page]: https://mhnpd.github.io/react-loader-spinner/
[storybook]: https://mhnpd.github.io/react-loader-spinner/

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.