rls

react-loader-spinner

Collection set of react-spinner for async operation

Showing:

Popularity

Downloads/wk

74.3K

GitHub Stars

526

Maintenance

Last Commit

1mo ago

Contributors

26

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Reviews

Average Rating

4.6/55
Read All Reviews
jsgiant
lepusarcticus
Aldres98

Top Feedback

5Easy to Use
2Performant
1Highly Customizable

Readme

Node.js Package release tag stars issue open-issues commits commits

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 (
      <Loader
        type="Puff"
        color="#00BFFF"
        height={100}
        width={100}
        timeout={3000} //3 secs
      />
    );
  }
}

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 TypeImplementation
Audio<Loader type="Audio" color="#00BFFF" height={80} width={80} />
BallTriangle<Loader type="BallTriangle" color="#00BFFF" height={80} width={80} />
Bars<Loader type="Bars" color="#00BFFF" height={80} width={80} />
Circles<Loader type="Circles" color="#00BFFF" height={80} width={80}/>
Grid<Loader type="Grid" color="#00BFFF" height={80} width={80} />
Hearts<Loader type="Hearts" color="#00BFFF" height={80} width={80} />
Oval<Loader type="Oval" color="#00BFFF" height={80} width={80} />
Puff<Loader type="Puff" color="#00BFFF" height={80} width={80} />
Rings<Loader type="Rings" color="#00BFFF" height={80} width={80} />
TailSpin<Loader type="TailSpin" color="#00BFFF" height={80} width={80} />
ThreeDots<Loader type="ThreeDots" color="#00BFFF" height={80} width={80} />

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.

nametypesdefaultDetail
visibleString or booleanfalseShow/ Hide the loader as required.
typeString"Audio"Type of spinner you want to display. View the type in Types of Spinner section.
heightNumber80Height prop define the height of the svg spinner. Default height is 80px.
widthNumber80Width prop define the width of the spinner.
colorString"Blue"color prop is for adding color to the spinner
secondaryColorString"Grey"secondaryColor prop for now is available on Plane and MutatingDots loaders
timeoutNumber0Duration in milliseconds after which spinner is disabled
radiusNumbervalue variesSet radius if the loader has a circle element in it

Typescript

Typescript support is now also available. It has full propType intellisense support. Just install the component library as usual and use it in any (React) \<Typescript> project.Finally, you will get all sorts of propType intellisense & static typeChecking out of the box. Just like Javascript we also ❤ Typescript.

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

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

License

MIT

Rate & Review

Great Documentation0
Easy to Use5
Performant2
Highly Customizable1
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Anil ChowdaryHyderabad78 Ratings78 Reviews
Frontend dev | React | Typescript | Javascript | Tailwind CSS
October 13, 2020
Highly Customizable
Performant

Making users wait by showing them a blank page while async-await operations will annoy them right. To avoid such annoyance react-loader-spinner is one of the solutions to show an impressive loader SVG to the user during async-await operations. It is very simple to use and customize based on our project's needs.


0
Ashutosh PandeIndore, Madhya Pradesh, India33 Ratings37 Reviews
COMPETITIVE PROGRAMMER | KAGGLE BEGINNER | MACHINE LEARNING EXPLORER
3 months ago
Easy to Use
Performant

I have been using react-loader-spinner to show a loader for async-await operation before the data loads. Alternatively, you can use the Material-UI backdrop for the same. But this is also used in a large number of projects worldwide. Docs should have been made more in detail.


0
Aldres9835 Ratings70 Reviews
October 20, 2020
Easy to Use

Most likely you'll need to show loading animation in every of your projects. And this thing is just awesome! Few seconds to configure and it works. No need to wrestle with css


0
Corey CUnited States7 Ratings0 Reviews
November 23, 2020
Easy to Use