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
Documentation:
DEMO
Code SandBox:
https://codesandbox.io/s/react-loader-spinner-weqls?file=/src/App.js
Usage
Import required css
Import the css to main app.js file
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { Audio } from 'react-loader-spinner'
<Audio
heigth="100"
width="100"
color='grey'
ariaLabel='loading'
/>
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 | <Audio color="#00BFFF" height={80} width={80} /> |
BallTriangle | <BallTriangle color="#00BFFF" height={80} width={80} /> |
Bars | <Bars color="#00BFFF" height={80} width={80} /> |
Circles | <Circles color="#00BFFF" height={80} width={80}/> |
Grid | <Grid color="#00BFFF" height={80} width={80} /> |
Hearts | <Hearts color="#00BFFF" height={80} width={80} /> |
Oval | <Oval color="#00BFFF" height={80} width={80} /> |
Puff | <Puff color="#00BFFF" height={80} width={80} /> |
Rings | <Rings color="#00BFFF" height={80} width={80} /> |
TailSpin | <TailSpin color="#00BFFF" height={80} width={80} /> |
ThreeDots | <ThreeDots color="#00BFFF" height={80} width={80} /> |
Here are the list of the task for which we want PR:
- Rings spinner is not supported in Safari
License
MIT