react-loader-spinner alternatives and similar libraries
Based on the "Loader" category.
Alternatively, view react-loader-spinner alternatives based on common mentions on social networks and blogs.
-
react-content-loader
⚪ SVG-Powered component to easily create skeleton loadings. -
react-spinners
A collection of loading spinner components for react -
react-spinkit
A collection of loading indicators animated with CSS for React -
react-redux-loading-bar
Loading Bar (aka Progress Bar) for Redux and React -
react-loader
React component that displays a spinner via spin.js until your component is loaded. -
react-progress-button
:cyclone: Simple react.js component for an inline progress indicator -
react-block-ui
Easy way to block the user from interacting with your UI. -
spinners-react
Lightweight SVG/CSS spinners for React -
react-spinners-css
Amazing collection of React spinners components with pure css -
react-md-spinner
Material Design spinner components for React.js. -
react-progress-label
Progress component for React and React Native -
React Nested Loader
The easiest way to inject a loader into a deeply nested component
Appwrite - The Open Source Firebase alternative introduces iOS support
Do you think we are missing an alternative of react-loader-spinner or a related project?
README
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:
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
height="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
*Note that all licence references and agreements mentioned in the react-loader-spinner README section above
are relevant to that project's source code only.