A collection of loading spinner components for react

Overview

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
Issues
  • Server Side rendering and domkit dependency

    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 ?

    opened by GuillaumeCisco 23
  • Ability to adjust the spinner speed

    Ability to adjust the spinner speed

    It would be nice if we have control for speed of spinner, somehow that have used in my old project and we had to adjust it by CSS properties.

    feature_request 
    opened by musti-91 19
  • 0.5.13 Multiple default exports crashing meteor and babel minifier

    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.

    opened by amsully 16
  • allow for styling the inner loader element

    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.

    opened by danalloway 12
  •  Must use import to load ES Module: node_modules/react-spinners/SyncLoader.js

    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.

    bug 
    opened by tyteen4a03 12
  • Upgrade to Emotion v10

    Upgrade to Emotion v10

    react-emotion package is no longer maintained, and it is recommended to use @emotion/core now (i.e., Emotion v10).

    opened by etairi 11
  • Using only specific loader type without importing whole spinner

    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';
    
    opened by archansel 11
  • Refacto update

    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'

    opened by GuillaumeCisco 9
  • RotateLoader does not render

    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 />;
    
    bug 
    opened by olivvybee 8
  • Bump glob-parent from 5.1.1 to 5.1.2

    Bump glob-parent from 5.1.1 to 5.1.2

    Bumps glob-parent from 5.1.1 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.2 (2021-09-29)

    Bug Fixes

    6.0.1 (2021-07-20)

    Bug Fixes

    • Resolve ReDoS vulnerability from CVE-2021-35065 (#49) (3e9f04a)

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump kind-of from 6.0.2 to 6.0.3

    Bump kind-of from 6.0.2 to 6.0.3

    Bumps kind-of from 6.0.2 to 6.0.3.

    Changelog

    Sourced from kind-of's changelog.

    [6.0.3] - 2020-01-16

    • Merge pull request #31 for issue #30

    [6.0.0] - 2017-10-13

    • refactor code to be more performant
    • refactor benchmarks

    [5.1.0] - 2017-10-13

    Added

    • Merge pull request #15 from aretecode/patch-1
    • adds support and tests for string & array iterators

    Changed

    • updates benchmarks

    [5.0.2] - 2017-08-02

    • Merge pull request #14 from struct78/master
    • Added undefined check

    [5.0.0] - 2017-06-21

    • Merge pull request #12 from aretecode/iterator
    • Set Iterator + Map Iterator
    • streamline isbuffer, minor edits

    [4.0.0] - 2017-05-19

    • Merge pull request #8 from tunnckoCore/master
    • update deps

    [3.2.2] - 2017-05-16

    • fix version

    [3.2.1] - 2017-05-16

    • add browserify

    [3.2.0] - 2017-04-25

    • Merge pull request #10 from ksheedlo/unrequire-buffer
    • add promise support and tests
    • Remove unnecessary Buffer check

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for kind-of since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Error while running test

    Error while running test

    Describe the bug I have a Syntax error while running test in repository, my test files are empty and only initial test file from CRA But I get this error:

    SyntaxError: /opt/atlassian/pipelines/agent/build/node_modules/react-spinners/PropagateLoader.js: pragma and pragmaFrag cannot be set when runtime is automatic. > 1 | "use strict"; | ^ 2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { 3 | if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 4 | return cooked; at File.buildCodeFrameError (node_modules/@babel/core/lib/transformation/file/file.js:250:12) at NodePath.buildCodeFrameError (node_modules/@babel/traverse/lib/path/index.js:133:21) at PluginPass.enter (node_modules/@babel/plugin-transform-react-jsx/lib/create-plugin.js:164:28) at newFn (node_modules/@babel/traverse/lib/visitors.js:171:21) at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20) at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17) at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:90:31) at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:99:16) at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:73:19) at TraversalContext.visit (node_modules/@babel/traverse/lib/context.js:127:19)

    Additional context "react-spinners": "^0.10.6", "react-dom": "^16.14.0", "react": "^16.14.0",

    opened by maxizhukov 4
  • Upgrade to 0.11 fails - Module not found: Error: Can't resolve '@emotion/core'

    Upgrade to 0.11 fails - Module not found: Error: Can't resolve '@emotion/core'

    Describe the bug (Newbie here)

    When dependabot ran today - it tried to upgrade react-spinners from 0.10.6 to 0.11.0.

    CI testing failed with an error: Module not found: Error: Can't resolve '@emotion/core'

    I googled it and found this in another repo: https://github.com/projectstorm/react-diagrams/issues/783

    "Apparently in Emotion 11, @emotion/core was renamed to @emotion/react,"

    It seems like maybe the dependancies for react-spinners need to be updated or changed so that the right ones are installed?

    ERROR in ./app/javascript/components/EventsFormScheduler.tsx Module not found: Error: Can't resolve '@emotion/core' in '/home/circleci/project/app/javascript/components' @ ./app/javascript/components/EventsFormScheduler.tsx 20:0-36 130:9-12 @ ./app/javascript/components/EventsForm.tsx @ ./app/javascript/components/Editor.tsx @ ./app/javascript/components/Scheduler.tsx @ ./app/javascript/components/App.tsx @ ./app/javascript/packs/index.tsx

    Expected Behaviour:

    • Upgrade should work, or changelog should indicate Breaking Change
    awaiting reply 
    opened by tonydehnke 3
  • How to solve EmotionCssPropInternal  unique

    How to solve EmotionCssPropInternal unique "key" prop issue

    Hi! i am using GridLoader in next js , but i get a error of Each child in a list should have a unique "key" prop warning

    import React from "react";
    import { css } from "@emotion/core";
    import GridLoader from "react-spinners/GridLoader";
    import Proptypes from 'prop-types'
    // Can be a string as well. Need to ensure each key-value pair ends with ;
    const override = css`
      display: block;
      margin: 150px auto;
      border-color: red;
    `;
    const PageLoader = Props => {
        return (
            <div className="sweet-loading">
                <GridLoader
                    css={override}
                    size={20}
                    color={"#62842C"}
                    loading={Props.loading}
                />
            </div>
        );
    };
    
    PageLoader.prototype = {
        loading: Proptypes.bool.isRequired
    }
    
    export default PageLoader;
    
    

    i am using this code to load Gridloader but i face

    Warning: Each child in a list should have a unique "key" prop.
        at span
        at EmotionCssPropInternal
        at Loader
    

    this warning, how can i solve it ?

    awaiting reply 
    opened by KoushikMVN 1
  • MoonLoader doesn't spin

    MoonLoader doesn't spin

    Describe the bug MoonLoader is not rendered like it should. Latest version of React.

    To Reproduce Steps to reproduce the behavior:

    1. Import MoonLoader import MoonLoader from "react-spinners/MoonLoader"

    2. Render in JSX <MoonLoader size={50} />

    3. See error

    Screen Shot 2021-03-16 at 5 04 26 PM

    Additional context NPM Version: ^0.10.6 React Version: ^17.0.1 Other loaders seem to work properly.

    bug awaiting reply 
    opened by Samuel-Montoya 9
  • GridLoader is not displayed in grid

    GridLoader is not displayed in grid

    Describe the bug The GridLoader is not displayed in grid, but in one line.

    To Reproduce Steps to reproduce the behavior:

    1. Use GridLoader in any react project.

    Expected behavior GridLoader dots should be displayed in a 3x3 grid, not on one unique line.

    Screenshots

    image

    Additional context Must be because of https://github.com/davidhu2000/react-spinners/issues/159

    Bug was not there in version 0.9.0 (I'm using this version to fix the issue temporarily).

    Possible fix Use css to display as block.

    awaiting reply 
    opened by GuillaumeDesforges 4
  • Support for ALT Text or Aria labels

    Support for ALT Text or Aria labels

    Is your feature request related to a problem? Please describe. I was looking to add alt-text or better yet, aria-labels to the spinners to make them more accessible.

    Describe the solution you'd like I've tried adding a span or straight text into the loader; nothing will render on screen, nor do I see it in the generated source. I've also tried adding aria-labels to the component, but they appear to be ignored.

      <ClockLoader
           css={override}
           size={20}
           color={"#000"}
           loading={this.state.spinner}
           aria-label = "loading"      
         > 
           
           Working....
           {/* screen-reader-only */}
           <span className='sr-only'>Generating report</span>
         </ClockLoader>
    
    feature_request 
    opened by khibma 1
  • BarLoader will not appear on v0.10.4

    BarLoader will not appear on v0.10.4

    Describe the bug BarLoader will show on v0.9.0 but not after upgrading to v0.10.4. It seems to have 0 width. The code that worked on v0.9.0 was this: <BarLoader css={{ margin: '0 auto' }} height={ 10 } width={ 300 } color="#4285F4" loading />

    To Reproduce Steps to reproduce the behavior:

    1. Upgrade to v0.10.4
    2. BarLoader no longer appears

    Screenshots image

    Additional context Still using the class version with react 17

    enhancement 
    opened by TrySickle 7
  • feat: optional animation delay in PuffLoader

    feat: optional animation delay in PuffLoader

    This is a simple feature to delay the animation on PuffLoader. I suppose it could be extended to other loaders too.

    The idea is that if you have multiple things loading, and you're rendering the loader from multiple places, you want to keep track of which stage of the animation the loader is in - otherwise, the animation will reset back to the beginning resulting in a jerky animation.

    There is an article detailing the application of this here: https://www.selbekk.io/blog/2019/08/how-to-stop-your-spinner-from-jumping-in-react/

    opened by felamaslen 3
Releases(0.7.0)
  • 0.7.0(Dec 21, 2019)

    The component API has been simplified. The length prop can now accept number or string.

    Major Changes

    • all unit props are deprecated, including sizeUnit, heightUnit, widthUnit, and radiusUnit. The size, height, width, and radius props now accepts number and string.
      • If value is number, default to px
      • If value is string with valid css unit, return the input value
      • If value is string with invalid css unit, output warning console log and default to px
    • margin prop now works the same way as other length props. Can accept number and string

    Minor Changes

    • css prop default is now "". No functionality change here.
    • fix margin prop functionality on FadeLoader and RotateLoader so it actually expands the spacing between the elements.
    • update the README color prop section to include a list of available color words accepted.
    • clean up README formatting using the prettier plugin
    • add yarn installation instruction to the README.
    Source code(tar.gz)
    Source code(zip)
  • 0.6.0(Aug 19, 2019)

    The entire package has been rewritten in TypeScript. The package will now support individual loader imports with types.

    Major changes:

    • Add support for types for individual loader imports
    • Add support for using the basic color name as props instead of only color hashes
    • Reduced total package size from around 850kb to 135gb
    • Fix main key value in package.json to point to the correct index.js
    • Removed prop-types and recompose from dependencies
    • Added tests to get to 100% code coverage

    Minor changes:

    • Update PacmanLoader css top property to respect sizeUnit prop.
    • Update README to include radius and radiusUnit.
    • Add missing transform key to the RiseLoader animation.
    • Setup tslint and prettier to enforce code consistency.
    • Add missing " to .babelrc in README.
    Source code(tar.gz)
    Source code(zip)
  • 0.5.0(Jan 6, 2019)

    • Update emotion package to emotion 10, this includes a breaking change with replacing className prop with css prop to match convention of the Emotion package.
    • update package.json to include wider range of version for recompose
    • update how onlyUpdateForKeys is imported from recompose. Reduced import cost from 26kb to 19kb.
    Source code(tar.gz)
    Source code(zip)
  • 0.4.3(Aug 11, 2018)

    • add className prop to allow more customization using emotion module.
    • removed loaderStyle prop in favor of the new className prop.
    • add functionality to import a single loader without importing the whole package.
    • readme updates to include all props and new changes
    Source code(tar.gz)
    Source code(zip)
  • 0.3.3(Jul 23, 2018)

  • 0.3.2(Apr 8, 2018)

    Emotion 8 deprecated the composes key in the css method. This causes several loaders to not render properly. Fixed the rendering issue for all the loaders on this release.

    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Apr 4, 2018)

    • added unit props to loaders to allow different css units such as %.
    • fixed some string concatenation errors in several loaders that prevented correct rendering.
    Source code(tar.gz)
    Source code(zip)
  • 0.2.3(Nov 22, 2017)

    • updated outdated devDependencies
    • removed unused npm scripts from package.json
    • added v16 for react and react-dom peerDependencies
    • minor linting fixes after upgrading devDependencies version
    Source code(tar.gz)
    Source code(zip)
  • 0.2.2(Nov 22, 2017)

  • 0.2.1(Nov 22, 2017)

Owner
David Hu
Software Developer with experience in languages such as Ruby, JavaScript, and SQL, and frameworks such as Rails, React, React Native, and Electron
David Hu
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
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

Josh Kuttler 274 Sep 24, 2021
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Oct 12, 2021
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

David Tang 2.4k Oct 13, 2021
: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

Mathieu Dutour 517 Sep 11, 2021
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 68 Oct 5, 2021
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 11.6k Oct 13, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021
❄️ 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

Junho Yeo 12 Sep 6, 2021
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

SWIFT CARROT Technologies 95 May 16, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021