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-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.
Important Note: This release is compatible with React 1.4 and higher. If you're working with an older version of React, this package might not work for you.
All the icon and spinner used in the Package are from SamHerbert svg-loader project on github. All the loading icon and spinner is built in pure svg. Preview of the all the available loader can be viewed on SamHerbert website here
Installation
$ npm install react-loader-spinner --save
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={Ball-Triangle} 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} /> |
PropTypes Aviliable
react-loader-spinner component accept following props. Instructions on how to use them are below.
PropType | Detail |
---|
type | Type of spinner you want to display. View the type in Types of Spinner section. |
height | Height props define the height of the svg spinner. Default height is 80px. |
width | Width props define the width of the spinner. Default Width is 80px. |
color | [Color Props is provide color to the spinner. Default color is light blue. |
visible | By default visible props is true. <Loader visible={false} /> |
License
MIT