mhnpd/react-loader-spinner

Collection sets of a spinners for async operations for ReactJS

react-spinner-loader provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.

Installation

npm install react-loader-spinner --save
# or
yarn add react-loader-spinner

Documentation:

1. Getting Started
2. Spinners
3. Code Sandbox Example

Usage

No css import is required

import { Audio } from 'react-loader-spinner'
;<Audio
  height="80"
  width="80"
  radius="9"
  color="green"
  ariaLabel="loading"
  wrapperStyle
  wrapperClass
/>

License

MIT

Contributors

react-loader-spinner's Issues

Scroll remove option

By default when we place loader, the scroll should be removed in the which is missing here

Readme Image

Label spinners on the demo page

Would be awesome to know what which spinner is which.
Maybe even a tip would help

No default jsDelivr CDN file set

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

New prop delay: to avoid flash loading spinner

inspired by react-loadable:

Avoiding Flash Of Loading Component
Sometimes components load really quickly (<200ms) and the loading screen only quickly flashes on the screen.

A number of user studies have proven that this causes users to perceive things taking longer than they really have. If you don't show anything, users perceive it as being faster.

So your loading component will also get a pastDelay prop which will only be true once the component has taken longer to load than a set delay.

function Loading(props) {
  if (props.error) {
    return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
  } else if (props.pastDelay) {
    return <div>Loading...</div>;
  } else {
    return null;
  }
}

Div wrapper garble the styles

It seems like the div wrapper is redundant and garbles the styling of the loader-spinner.

Here is the screencast

So the loader height in the example is set to 24px, but the resulting height is bigger because of the presence of the div wrapper.

  return display ? (
    <div aria-busy="true" className={props.className} style={props.style}>
      {React.createElement(componentName(props.type), { ...props })}
    </div>
  ) : null;

Why is there a need for it in the first place? Might I ask

Apart from that, I'm using the loader-spinner on a repo with TypeScript, and it seems the type declarations are outdated. Why?
Because the declarations for props doesn't include className or styles

className not in LoaderProps type

TypeScript thinks there isn't className prop in Loader

Typescript type missing!!!

TypeScript error: Could not find a declaration file for module 'react-loader-spinner'. '/Users/sathishjobs/work/work/2i/react/a8/a8flow-web/node_modules/react-loader-spinner/index.js' implicitly has an 'any' type.
Try npm install @types/react-loader-spinner if it exists or add a new declaration (.d.ts) file containing `declare module 'react-loader-spinner';

How do i solve this problem...

Not working in IE.

Loader animation is not working in IE11.

Loader cannot be used as a JSX component

Hi, i got the following error:

any idea?

Doesn't work with a simple npm install

journal/node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css:1
(function (exports, require, module, __filename, __dirname) { .swing div {
                                                              ^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.defineProperty.value (journal/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:5:40)
    at Object.<anonymous> (journal/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:13:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.defineProperty.value (journal/node_modules/react-loader-spinner/dist/index.js:5:434)
    at Object.<anonymous> (journal/node_modules/react-loader-spinner/dist/index.js:13:3)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (journal/node_modules/react-loader-spinner/index.js:1:80)

Bundled some Unused Spinner type

This is just my question and report.

I'm using this package with Gatsby and visualized the bundle size. Then I found that JS about the unused Spinner type was also bundled.

Is this the specification of this package? Or Is it my misconfiguration?

IF former, when using only one type (like me), and I think it inefficient to load a lot of content.
And, IF it is possible to bundle only the type of assets we use, I would like to improve it!😋

Why do you use the style prop instead of the default className prop?

Not only do I get warnings from the creat react-app setup, I also do not see why you would do that. It's counterintuitive.

Grid Loader Animation Issue

The top-left dot in the Grid loader does not animate due to a typo - In src/loader/Grid.js on line 7
attributeName="fillOpacity" should read attributeName="fill-opacity".

No CONTRIBUTING.md

Hello. Was looking to contribute to this project but could not find a n appropriate way to. Please add a contributing guideline to assist with that.

Clear timeout when component dismounts

If you dismount a screen using this loader spinner, when the loading timeout occurs, it raises an error because it is trying to dismount the nonexistent component.

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Loader (at AppLoading.js:67)

Outdated dependencies?

When I run a yarn command, I get the following warning from react-loader-spinner:

warning react-loader-spinner > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Can we have babel-runtime bumped please? I think they switched to @babel/runtime. Thank you!

add string prop type to width and height?

currently the props type is

Loader.propTypes = {
  height: PropTypes.number,
  width: PropTypes.number,
  color: PropTypes.string,
  label: PropTypes.string
};

however height and width are able to receive string input, this is convenient if we want to set something like

width='3rem' height='3rem'

it works fine as far as I can see

what is the reason to not include string prop type?

No Loader Speed Control

No Loader Speed Control. I went control loader speed

CSS bleed in Triangle.css

Problem: CSS bleeds through to any other part of the app, not limited to the spinners themselves

Suggestion: add a parent class for each spinner (svg) and base all CSS rules on this.

solution for triangle.css, but the classes are fairly ambiguous in other css files as well:

svg.loader-spinner {
  -webkit-transform-origin: 50% 65%;
          transform-origin: 50% 65%;
}

svg.loader-spinner polygon {
  stroke-dasharray: 17;
  -webkit-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
          animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}

@-webkit-keyframes loader-spinner-dash {
  to {
    stroke-dashoffset: 136;
  }
}

@keyframes loader-spinner-dash {
  to {
    stroke-dashoffset: 136;
  }
}
@-webkit-keyframes loader-spinner-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loader-spinner-rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

Loader is alerting on render

Looks like an alert was left in code:

https://github.com/mhnpd/react-loader-spinner/blame/master/src/index.js#L71

Add text to spinner

as a suggestion the package should have an option to add text on the top or on the bottom from loader

TypeScript types definition support

Triangle loader is not spinning

Triangle loader is not spinning. Ver. 3.1.2

Invalid DOM property `fill-opacity`. Did you mean `fillOpacity`

I used hearts as the loader type but a warning is shown in console:

Warning: Invalid DOM property fill-opacity. Did you mean fillOpacity?

None of the spinners work in Edge

None of the spinners work in Edge on Windows (all the latest).

Is this by design?

To repro open any demo page in Edge.

Error<animate> attribute keySplines: Invalid value, "0.175, 0.885, 0.320, 1.5; 0.175, 0.885, 0.320, 1.5". Chrome, Mutation dots not formatted correctly

Error: <animate> attribute keySplines: Invalid value, "0.175, 0.885, 0.320, 1.5; 0.175, 0.885, 0.320, 1.5".
setValueForProperty @ react-dom.development.js:1297
setInitialDOMProperties @ react-dom.development.js:5831
setInitialProperties @ react-dom.development.js:6026
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

<Row>
    <Card className="mx-auto col">
        <Card.Img variant="top" src={logo} alt="DBi Services" className="card-img-top-login" />
        <Card.Body>
            <Col />
            <Col className="text-center">
                <Loader type="MutatingDots" color="#1D4078" height={100} width={100} />
            </Col>
            <Col />
        </Card.Body>
    </Card>
</Row>

In Chrome getting the above error in the console. Also animation spacing not correct.

Here is and example, error doesn't seem to show up here like it does in chrome though

Example

Add a timeout props

When I started using this project, I just needed to simulate a network request or any other time-consuming processes. To do this, I had to set and manipulate states in my component and use timeouts. it would be better if we added a little bit of customization by way of props to this project.
Hence, I have created one more prop, timeout, which should be a number.
I have already forked this project and written an implementation for this. A PR will be opened if I get a go-ahead on this issue.

2 TailSpin cannot have different colors

When there's 2 TailSpin loaders, they cannot have different colors. The color of the first one is used to draw the second spinner.

example : https://codesandbox.io/s/km60o988v3

import React from "react";
import ReactDOM from "react-dom";
import Loader from "react-loader-spinner";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Loader type="TailSpin" color="#00BFFF" height="100" width="100" />
      <Loader type="TailSpin" color="green" height="100" width="100" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Applying class

I want to center the svg by passing in a className in react. Is this supported as a prop? I can't get it to work.

Pull request for secondaryColor and secondaryStrokeWidth for the oval spinner

I added a secondaryColor and secondaryStrokeWidth for the oval spinner. I would like to pull request this. You can take a look at my branch here : https://github.com/AdrianRisch/react-loader-spinner/tree/Add-Secondoary-Color-at-Oval

If the data doesn't come in certain time it should display something(text).

There should be an onTimeout function to handle the case when timeout is there

Presently, there is no function available in props so we can specify exactly what action should happen on timeout of the loader.

Invariant Violation: View config not found for name animate.

Invariant Violation: View config not found for name animate. Make sure to start component names with a capital letter.

This error is located at:
in animateTransform (created by Circles)
in path (created by Circles)
in svg (created by Circles)
in Circles (created by Loader)
in div (created by Loader)
in Loader (at ProgressView.js:13)

Code :

<Loader
type="Circles"
color="#00BFFF"
height={100}
width={100}
timeout={3000} //3 secs

        />

Can't install with React 17

Hi, I just started learning React and I found your library and I'd like to use it in my app. But I am having an issue when trying to install it. When I run

npm i react-loader-spinner

I get

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from [email protected]
npm ERR! node_modules/react-loader-spinner
npm ERR!   react-loader-spinner@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\melin\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\melin\AppData\Local\npm-cache\_logs\2021-01-10T23_21_50_021Z-debug.log
``` `

It seems that this package is not compatible with the new version of React (17)

Thanks in advance.

Add property to let a loader know when to render

@mhnpd - I want to propose an enhancement to the <Loader />

Scenario: Imagine you have an upload button that makes a POST request to a server. In flight, the React state is set to loading = true; which triggers the <Loader /> to render. This works great and as expected. Now, let's say you also have a delete button that deletes a resource on the server. This delete button follows the same logic as the upload button. Request is made, state is changed to true, loader renders. In this case, we have two loaders that are relying on the same state variable and thus we get both Loaders rendering even though one action was taken.

Proposal: There are a couple of ways to fix this. Currently, I'm maintaining a loading state map that tells the two loaders when to render. This allows me to have N loaders in the same component and render each one individually. However, I think it would be a better developer experience if the <Loader /> component could take in a prop function that evaluated to true or false and let the loader know to render or not. There are a couple of ways to accomplish this but the idea is that the <Loader /> could be enhanced so that it knew when to render. Thoughts? I can put together a PR if you think this is an added value.

loade

unexpected token . at credleLoader.css:1

After installing the npm package and using it in my component tree, I get the message:-

/Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/loader/css/CradleLoader.css:1
.react-spinner-loader-swing div {
^

SyntaxError: Unexpected token .
    at Module._compile (internal/modules/cjs/loader.js:760:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at /Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:5:40
    at Object.<anonymous> (/Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/loader/CradleLoader.js:13:3)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)
    at /Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/index.js:5:434
    at Object.<anonymous> (/Users/apple/codebase/avenue/node_modules/react-loader-spinner/dist/index.js:13:3)```

CSS not in the dist folder

Hi,

Thanks for your work very nice and easy to use.

When I try to use the Loader I received this error message:
./node_modules/react-loader-spinner/dist/loader/CradleLoader.js
Module not found: Can't resolve './css/CradleLoader.css' in '$myappfolder/node_modules/react-loader-spinner/dist/loader'

When I add the css folder from src to dist everything works.

unmet peer dependency

Every time when I run yarn install, it says:

warning " > [email protected]" has unmet peer dependency "prop-types@^15.6.1".

How to fix this?

High CPU usage when using some spinners in the page

I have a dashboard page, which has several charts displayed on it.
I used a lazy renderer which uses the react-loader-spinner as the component displayed before the chart is displayed.
When entering the page, the CPU usage of the browser (Firefox, Safari, Chrome) is reaching 100%.
Even on your demo page, with only one spinner showing on the screen without anything else, the CPU is at constant 25-30% CPU usage.

className type error

type error in className, however class successfully applied

currently I use // @ts-ignore to ignore the error

Add Accessibility Controls

adding aria-busy="true" to the container and and aria-label="Loading content, please wait." to the SVG would help communicate this state better to a screen reader

Module not found: Can't resolve 'react-loader-spinner'

I am getting this error.

Also I am getting following error after running : npm i react-loader-spinner

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6" from [email protected]
npm ERR! node_modules/react-loader-spinner
npm ERR!   react-loader-spinner@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2020-12-10T19_41_44_202Z-debug.log

I deleted my node folders and reinstalled packages. Deleted -lock file but didnt help.
Any suggestions?

CSS pollutes global namespace

To reproduce:

• Have a site that contains one of the loader spinners. I am using Gatsby but I am fairly confident this issue will occur in all configurations.
• Elsewhere in the site, insert code like the following: <div className="shadow">content</div>
• Inspect the generated content in the browser

Expected: The .shadow div should be unstyled

Actual: The .shadow div contains the following styling:

.shadow {
	clear: left;
	padding-top: 1.5em;
}

This CSS is specific to the Loader component and should be namespaced as such, e.g. .react-loader-spinner--shadow.

ThreeDots, Puff, Rings, and Triangle loaders do not work in Safari

The ThreeDots spinner works fine in Chrome and Firefox (I've checked those) but it doesn't work in Safari.

I'm not sure if this is because of the way Safari interprets SVGs.

Width and Height properties on the 'Bars' Loader

Width and Height properties on the 'Bars' Loader seem to be confused with each other. So height stands for width and vice versa.

SVG Spinners don't animate until page load completely

I'm trying to use a spinner while page is loading at first time. But as the library use svg the animation doesn't starts until page loads completely. Do you have any plan to solve this or is out of your roadmap?

bump peer dep versions for react libs

Can you bump the peer dep versions for the various react libs to include latest major?

Thanks!

Mutating Dots not accepting height property

Mutating Dots spinner does not accepts the height property, keeps it at the initial value of 90.