Popularity
5.3
Growing
Activity
8.1
Declining
627
8
113

Programming language: TypeScript
License: MIT License
Tags: UI Components     Loader    

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.

Do you think we are missing an alternative of react-loader-spinner or a related project?

Add another 'Loader' Library

README

Node.js Package release tag stars issue open-issues commits commits

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
    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} />

alt text

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.