A collection of loading spinner components for react

Last update: May 15, 2022

React Spinners

npm version circle ci downloads license Coverage Status

dependencies Status devDependencies Status peerDependencies Status

A collection of loading spinners with React.js based on Halogen.

This package is bootstraped using react-npm-boilerplate

Demo

Demo Page

Installation

With Yarn:

yarn add react-spinners

With npm:

npm install --save react-spinners

Usage

Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

Each loader accepts a loading prop as a boolean. The loader will render null if loading is false.

IMPORTANT: This package uses emotion. Remember to add the plugin to .babelrc, for example:

{
    "presets": ["@babel/preset-react", "@babel/preset-env"],
    "plugins": ["@emotion"]
}

Example

import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader";

// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

function App() {
  let [loading, setLoading] = useState(true);
  let [color, setColor] = useState("#ffffff");

  return (
    <div className="sweet-loading">
      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
      <input
        value={color}
        onChange={(input) => setColor(input.target.value)}
        placeholder="Color of the loader"
      />

      <ClipLoader color={color} loading={loading} css={override} size={150} />
    </div>
  );
}

export default App;
Example using React Class
import React from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader";

// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }

  render() {
    return (
      <div className="sweet-loading">
        <ClipLoader css={override} size={150} color={"#123abc"} loading={this.state.loading} />
      </div>
    );
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true;
color: "#000000";
css: "";

color prop

color prop accepts a color hash in the format of #XXXXXX or #XXX. It also accepts basic colors listed below:

maroon, red, orange, yellow, olive, green, purple, white, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver

css prop

css works exactly like the css works with the emotion package. You can directly write your css in css syntax without the dirty camelCase css in jss syntax. We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream! More info about using css here

size, height, width, and radius props

The input to these props can be number or string.

  • If value is number, the loader will default to css unit px.
  • If value is string, the loader will verify the unit against valid css units.
    • If unit is valid, return the original value
    • If unit is invalid, output warning console log and default to px.

The table below has the default values for each loader.

Loader size height width radius margin
BarLoader 4 100
BeatLoader 15 2
BounceLoader 60
CircleLoader 50
ClimbingBoxLoader 15
ClipLoader 35
ClockLoader 50
DotLoader 60 2
FadeLoader 15 5 2 2
GridLoader 15
HashLoader 50 2
MoonLoader 60 2
PacmanLoader 25 2
PropagateLoader 15
PuffLoader 60
PulseLoader 15 2
RingLoader 60 2
RiseLoader 15 2
RotateLoader 15 2
ScaleLoader 35 4 2 2
SyncLoader 15 2

GitHub

https://github.com/davidhu2000/react-spinners
Comments
  • 1. Server Side rendering and domkit dependency

    Hello,

    Using domkit prevents react-spinners to be used with Server side rendering technics, as domkit needs the document javascript global which is not present on the server. Should it be possible to get rid of domkit ?

    Reviewed by GuillaumeCisco at 2017-08-18 16:27
  • 2. 0.5.13 Multiple default exports crashing meteor and babel minifier

    Describe the bug

    Error within UI after successful build: Screen Shot 2019-07-23 at 11 17 57 AM Screen Shot 2019-07-23 at 11 17 46 AM

    Error thrown during babel minification process in meteor:

     
    export default Component; 
     
    at maybeThrowMinifyErrorBySourceFile 
    (packages/minifyStdJS/plugin/minify-js.js:96:26) 
    at files.forEach.file (packages/minifyStdJS/plugin/minify-js.js:135:9) 
    at Array.forEach (<anonymous>) 
    at MeteorBabelMinifier.processFilesForBundle 
    (packages/minifyStdJS/plugin/minify-js.js:118:9) 
     
     
    While minifying app code: 
    packages/minifyStdJS/plugin/minify-js.js:96:26: Babili minification error 
    within packages/modules.js: 
    node_modules/react-spinners/dist/BeatLoader.js 
     
    Only one default export allowed per module.: 
     
    export default Component; 
     
    at maybeThrowMinifyErrorBySourceFile 
    (packages/minifyStdJS/plugin/minify-js.js:96:26) 
    at files.forEach.file (packages/minifyStdJS/plugin/minify-js.js:135:9) 
    at Array.forEach (<anonymous>) 
    at MeteorBabelMinifier.processFilesForBundle 
    (packages/minifyStdJS/plugin/minify-js.js:118:9)
    

    To Reproduce Steps to reproduce the behavior:

    1. Meteor app using version 1.8.1. Babel runtime 7.3.4.
    2. Import react-spinner 0.5.13 into app and throws errors shown in screenshot.

    Temporary Solution Our solution was to downgrade to version 0.5.12 until this is resolved.

    Reviewed by amsully at 2019-07-23 15:21
  • 3. Must use import to load ES Module: node_modules/react-spinners/SyncLoader.js

    I'm getting this error when using 0.10.1 of this package:

    Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: **/node_modules/react-spinners/SyncLoader.js
    require() of ES modules is not supported.
    require() of **/node_modules/react-spinners/SyncLoader.js from **/.next/server/pages/**.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
    Instead rename SyncLoader.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from **react-spinners/package.json.
    
        at new NodeError (node:internal/errors:278:15)
        at Object.Module._extensions..js (node:internal/modules/cjs/loader:1125:13)
        at Module.load (node:internal/modules/cjs/loader:973:32)
        at Function.Module._load (node:internal/modules/cjs/loader:813:14)
        at Module.require (node:internal/modules/cjs/loader:997:19)
        at require (node:internal/modules/cjs/helpers:92:18)
        at eval (webpack-internal:///react-spinners/SyncLoader:1:18)
        at Object.react-spinners/SyncLoader (**/.next/server/pages/**.js:820:1)
        at __webpack_require__ (**/.next/server/pages/**.js:23:31)
        at eval (webpack-internal:///./pages/**.tsx:6:83) {
      code: 'ERR_REQUIRE_ESM'
    }
    

    No such error with 0.9.0.

    Reviewed by tyteen4a03 at 2021-01-01 14:51
  • 4. allow for styling the inner loader element

    this PR illustrates who we could possibly tweak all the Loader classes to allow for a style prop to be passed through and applied last to support overriding / customizing the inner loader element.

    Reviewed by danalloway at 2017-08-06 15:07
  • 5. Using only specific loader type without importing whole spinner

    Hi, is there any way to load only one specific loader without the whole spinner being bundled. Something like what lodash did, for example:

    import BarLoader from 'react-spinners/bar-loader';
    
    Reviewed by archansel at 2017-12-28 08:32
  • 6. Support React 18

    React 18 released: https://github.com/facebook/react/releases/tag/v18.0.0

    Is this library compatible with React 18 despite the warning that's currently printed when installing react-spinners?

    Reviewed by nikeee at 2022-03-29 20:12
  • 7. Refacto update

    Big refactoring - Fix #36 #35 #29 #23 #2 Add className property for overriding loader style. Fix scalibility pacman loader. Load spinner like lodash do : import {BarLoader} from 'react-spinners or import BarLoader from 'react-spinners/BarLoader'

    Reviewed by GuillaumeCisco at 2018-07-09 08:37
  • 8. RotateLoader does not render

    Do you want to request a feature or report a bug? Report a bug.

    If reporting a bug, what version of react-spinners are you currently using? 0.2.5

    What is the current behavior? The RotateLoader does not render anything on the page and appears as an empty 0 x 0 element.

    If the current behavior is a bug, please provide the steps to reproduce

    import React from 'react';
    import { RotateLoader } from 'react-spinners';
    
    const MyComponent = () => <RotateLoader />;
    
    Reviewed by olivvybee at 2017-12-25 23:04
  • 9. [Question] How to use react-spinners/BarLoader as externals in webpack?

    Hi,

    I am trying to use react-spinners version 0.11.0 with React and for the Prod html template I load it:

      <body>
        <div id="root"></div>
        [... other libs here]
        <script crossorigin src="https://unpkg.com/[email protected]/index.js"></script>
      </body>
    

    Then in my webpack.prod.js I have:

      externals: {
      [... other libs here...]
        'react-spinners': 'BarLoader'
      }
    

    I import it like this in my code:

    import { BarLoader } from 'react-spinners'

    However I get the following errors:

    index.js:formatted:8 Uncaught ReferenceError: exports is not defined
        at index.js:formatted:8
    (anonymous) @ index.js:formatted:8
    bundle.js:146 Uncaught ReferenceError: BarLoader is not defined
        at bundle.js:146
        at bundle.js:216
        at bundle.js:216
    

    Is there a working version in a CDN? I could not find a /dist folder.

    If not, would that be possible to create it?

    Thank you.

    Reviewed by gabrielbahniuk at 2021-06-02 15:14
  • 10. Following readme example leads to propType warning

    Do you want to request a feature or report a bug? I want to report a bug.

    If reporting a bug, what version of react-spinners are you currently using? I am using react-spinners version 0.5.0

    What is the current behavior? Following the example in the read me causes a warning: Warning: Failed prop type: Invalid propcssof typeobjectsupplied toLoader, expectedstring.

    If the current behavior is a bug, please provide the steps to reproduce Follow the code example in the read me.

    Reviewed by ahctangU at 2019-01-10 02:52
  • 11. Breaks on the latest version of react.

    I couldn't build my project anymore and after some digging, it seems like this module was the origin. Removing it instantly fixed everything, the strange thing is that this only occurred after I ran npm update. So it seems like your dev dependencies being outdated is causing some breaking issues.

    Reviewed by Pixelatex at 2017-10-18 12:07
  • 12. Remove emotion usage & convert to functional component

    • [x] BarLoader #473
    • [ ] BeatLoader
    • [ ] BounceLoader
    • [ ] CircleLoader
    • [ ] ClimbingBoxLoader
    • [ ] ClipLoader
    • [ ] ClockLoader
    • [ ] DotLoader
    • [ ] FadeLoader
    • [ ] GridLoader
    • [ ] HashLoader
    • [ ] MoonLoader
    • [ ] PacmanLoader
    • [ ] PropagateLoader
    • [ ] PuffLoader
    • [ ] PulseLoader
    • [ ] RingLoader
    • [ ] RiseLoader
    • [ ] RotateLoader
    • [ ] ScaleLoader
    • [ ] SkewLoader
    • [ ] SquareLoader
    • [ ] SyncLoader
    Reviewed by davidhu2000 at 2022-05-16 04:30
  • 13. Replace enzyme with react testing library

    • [x] BarLoader #475
    • [ ] BeatLoader
    • [ ] BounceLoader
    • [ ] CircleLoader
    • [ ] ClimbingBoxLoader
    • [ ] ClipLoader
    • [ ] ClockLoader
    • [ ] DotLoader
    • [ ] FadeLoader
    • [ ] GridLoader
    • [ ] HashLoader
    • [ ] MoonLoader
    • [ ] PacmanLoader
    • [ ] PropagateLoader
    • [ ] PuffLoader
    • [ ] PulseLoader
    • [ ] RingLoader
    • [ ] RiseLoader
    • [ ] RotateLoader
    • [ ] ScaleLoader
    • [ ] SkewLoader
    • [ ] SquareLoader
    • [ ] SyncLoader
    Reviewed by davidhu2000 at 2022-05-16 02:12
  • 14. react-spinners does not compile when being hoisted

    Describe the bug Demo code doesn't build when react-spinners lives in a node_modules higher up in the tree

    Example tree

    node_modules
    └── react-spinners
    
    my-app
    ├── src
    │   ├── App.tsx
    ├── node_modules
    └── └── react-scripts
    

    This tree is a standard tree when using yarn workspaces This tree respects the node module resolution algorithm

    To Reproduce Steps to reproduce the behavior:

    1. cd /tmp
    2. npx create-react-app my-app --template typescript
    3. cd my-app
    4. Copy demo code from https://www.npmjs.com/package/react-spinners into my-app/src/App.tsx
    5. npm install react-spinners
    6. mkdir ../node_modules
    7. mv node_modules/react-spinners ../node_modules
    8. npm run build

    Expected behavior

    Compiles

    Actual behavior

    Creating an optimized production build...
    Failed to compile.
    
    TS2607: JSX element class does not support attributes because it does not have a 'props' property.
        19 |       <input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
        20 |
      > 21 |       <ClipLoader color={color} loading={loading} css={override} size={150} />
           |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        22 |     </div>
        23 |   );
        24 | }
    
    
    Reviewed by sguillia at 2022-02-25 23:09
  • 15. PropagateLoader is not showing any loader animation

    Describe the bug PropagateLoader is not showing any loader animation.

    To Reproduce Steps to reproduce the behavior:

    1. Go to IDE install react-spinners
    2. Import PropagateLoader
    3. Check on the terminal, it is not showing any error but on the browser, it is not showing any loader

    Expected behavior It should show PropagateLoader, which is showing on https://www.davidhu.io/react-spinners/ this website

    Screenshots Screenshot (479) Screenshot (480)

    Reviewed by nidhi99verma at 2021-12-23 06:52
  • 16. Current npm version (0.11.0) fails with react-scripts 4.0

    0.11.0 worked fine with create-react-app 3.x.x, but after bumping to 4.0, it no longer compiles. I get the following error:

    pragma and pragmaFrag cannot be set when runtime is automatic
    

    Luckily, it seems like as of #5e23db4 master does work. But, I can't install directly from GitHub. Doing something like:

    yarn add github:davidhu2000/react-spinners#5e23db437cc31170a646103a3fe81b9ae5e2a08
    

    just clones the whole repo into my node_modules so the compiler can't find index.js when I try to import.

    Is it possible to either:

    1. Release a new version to NPM
    2. Modify the structure of the repo so that it installs correctly straight from github with yarn
    Reviewed by QuinnFreedman at 2021-12-11 03:02
  • 17. Add custom HTML props

    Implements the #353 feature.

    At first I started by extending CommonProps with React.HTMLAttributes<HTMLSpanElement> so that you could pass arial-label down to the top-level span like <Loader arial-label="loader" />. However, it's tricky to pull out only the HTML props with there being different prop interfaces for some components.

    Additionally, commonValues was producing an error because it's required to define all the props, which in this case was 200 HTML props: https://github.com/davidhu2000/react-spinners/blob/5e23db437cc31170a646103a3fe81b9ae5e2a080/src/helpers/proptypes.ts#L12

    Given these issues, I decided to put it in it's own prop customProps. What do you think about that? I'm not entirely convinced the name is the perfect fit.

    The tests are failing because of the #455 error.

    Reviewed by Seth10001 at 2021-10-24 16:50
A Loading Component for displaying loading state of a page or a section.
A Loading Component for displaying loading state of a page or a section.

react-loadingmask A Loading Component for displaying loading state of a page or a section.

Mar 1, 2021
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

May 4, 2022
A collection of loading spinners with React.js
A collection of loading spinners with React.js

React Spinners Kit A collection of loading spinners built with styled-components. Live Demo To check out live examples visit https://dmitrymorozoff.gi

May 12, 2022
💀 Dead simple content loading components for React and React-Native. 💀

react-bones Dead simple loading components for React and React-Native. NPM GitHub ?? npm i react-bones React import { Bones } from "react-bones/lib";

Mar 3, 2022
Amazing collection of React spinners components with pure css
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

May 13, 2022
Loading Bar (aka Progress Bar) for Redux and React
Loading Bar (aka Progress Bar) for Redux and React

React Redux Loading Bar A React component that provides Loading Bar (aka Progress Bar) for long running tasks. Consists of: React component — displays

May 14, 2022
Accessible and Simple Loading indicators in React
Accessible and Simple Loading indicators in React

React Loading Simple and Accessible loading indicators with React. Comes bundled with React components of Sam Herbert's animated SVG loaders in a tree

Apr 25, 2022
React PureComponent loading animations
React PureComponent loading animations

react-pure-loaders React PureComponent loading animations Demo Demo Page Installation Install with yarn: yarn add @emotion/core react-pure-loaders Ins

Apr 14, 2022
Build a smooth and lightweight react component loading with css 🎉 .
Build a smooth and lightweight react component loading with css 🎉 .

A React-based Loading animation component library 简体中文 | English Introduction React-Loading is a React-based Loading animation component library inclu

May 4, 2022
CSS-only spinners of loading.io for React

React Spiners using Loading.io CSS-only spinners of loading.io for React Demo Demo Page Installation Using npm: npm install react-loading-io --save Us

Dec 12, 2021
🎈React component to manipulate the favicon, for loading or progress.
🎈React component to manipulate the favicon, for loading or progress.

react-loadcon React component to manipulate the favicon, as a loading or progress indicator, for now. The idea of "Favicon as DOM" is under constructi

May 5, 2022
Make beautiful, animated loading skeletons that automatically adapt to your app.
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

May 16, 2022
Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.

Ladda Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. Check out the demo page. Installation npm in

May 9, 2022
Awesome spinners for React 👋 ⚛ Built with styled-components 💅
Awesome spinners for React 👋 ⚛ Built with styled-components  💅

react-awesome-spinners Loading spinners for React, built with styled-components. Demo Installation npm npm i react-awesome-spinners yarn yarn add reac

May 9, 2022
Progress component for React and React Native
Progress component for React and React Native

react-progress-label Progress component for React and React Native Installation yarn add react-progress-label npm install react-progress-label --save

Jan 9, 2022
Circular-dashed-progress-react -This is zero dependency dashed circular progress bar component in React
Circular-dashed-progress-react -This is zero dependency dashed circular progress bar component in React

Circular Dashed Progress React This is zero dependency dashed circular progress

Feb 6, 2022
:cyclone: Simple react.js component for an inline progress indicator

react-progress-button Simple React component for a circular Progress Button. Demo Install npm install react-progress-button --save Example Controlled

Mar 24, 2022
3D animated react button component with progress bar.
3D animated react button component with progress bar.

3D animated react button component with progress bar.

Apr 27, 2022
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Mar 12, 2022