What is react-loader-spinner?
The react-loader-spinner package provides a collection of customizable loading spinner components for React applications. These spinners can be used to indicate loading states in your application, enhancing the user experience by providing visual feedback during asynchronous operations.
What are react-loader-spinner's main functionalities?
Basic Spinner
This code demonstrates how to use the Oval spinner from the react-loader-spinner package. The spinner is customized with a specific color and size.
import { Oval } from 'react-loader-spinner';
function App() {
return (
<div className="App">
<Oval color="#00BFFF" height={80} width={80} />
</div>
);
}
Customizable Spinner
This example shows how to use the Rings spinner with additional customization options such as color, size, and timeout duration.
import { Rings } from 'react-loader-spinner';
function App() {
return (
<div className="App">
<Rings color="#FF5733" height={100} width={100} timeout={3000} />
</div>
);
}
Multiple Spinners
This code demonstrates how to use multiple different spinners from the react-loader-spinner package within the same component.
import { Oval, Rings } from 'react-loader-spinner';
function App() {
return (
<div className="App">
<Oval color="#00BFFF" height={80} width={80} />
<Rings color="#FF5733" height={100} width={100} />
</div>
);
}
Other packages similar to react-loader-spinner
react-spinners
The react-spinners package provides a collection of loading spinner components for React, similar to react-loader-spinner. It offers a variety of spinner types and customization options. Compared to react-loader-spinner, react-spinners has a more extensive collection of spinner types and is widely used in the React community.
react-loading
The react-loading package offers a set of simple loading animations for React applications. It is lightweight and easy to use, making it a good alternative to react-loader-spinner for projects that require basic loading indicators without extensive customization.
react-content-loader
The react-content-loader package allows you to create SVG loading placeholders that mimic the content being loaded. This package is particularly useful for creating skeleton screens, providing a different approach to loading indicators compared to react-loader-spinner.
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 {
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 Type | Implementation |
---|
Audio | <Loader type="Audio" color="#00BFFF" height={80} width={80} /> |
Ball-Triangle | <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.
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]: <https://github.com/SamHerbert/SVG-Loaders>
[here]: <http://samherbert.net/svg-loaders>
[View in page]: https://mhnpd.github.io/react-loader-spinner/
[storybook]: https://mhnpd.github.io/react-loader-spinner/