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.js spinner component which can be implemented for async wait operation before data load to the view.
Installation
Using NPM:
$ npm install react-loader-spinner --save
Using yarn
$ yarn add ract-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"
/>
);
}
}
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.
Spinner Type | Implementation |
---|
Audio | <Loader type="Audio" color="#somecolor" height={80} width={80} /> |
Ball-Triangle | <Loader type="BallTriangle" color="#somecolor" height={80} width={80} /> |
Bars | <Loader type="Bars" color="#somecolor" height={80} width={80} /> |
Circles | <Loader type="Circles" color="#somecolor" height={80} width={80}/> |
Grid | <Loader type="Grid" color="#somecolor" height={80} width={80} /> |
Hearts | <Loader type="Hearts" color="#somecolor" height={80} width={80} /> |
Oval | <Loader type="Oval" color="#somecolor" height={80} width={80} /> |
Puff | <Loader type="Puff" color="#somecolor" height={80} width={80} /> |
Rings | <Loader type="Rings" color="#somecolor" height={80} width={80} /> |
TailSpin | <Loader type="TailSpin" color="#somecolor" height={80} width={80} /> |
ThreeDots | <Loader type="ThreeDots" color="#somecolor" height={80} width={80} /> |
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.
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 provide color to the spinner |
TODO LIST
- Change Docs on Storybooks
- Optimize css implementation
License
MIT