0.13.8 • Published 1 year ago

react-spinners v0.13.8

Weekly downloads
143,810
License
MIT
Repository
github
Last release
1 year ago

React Spinners

npm version downloads license

Coverage Status Dependency Count Types Included Tree Shaking Supported

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

This package is bootstraped using react-npm-boilerplate

Demo

Demo Page

Storybook

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.

Example

import { useState, CSSProperties } from "react";
import ClipLoader from "react-spinners/ClipLoader";

const override: CSSProperties = {
  display: "block",
  margin: "0 auto",
  borderColor: "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}
        cssOverride={override}
        size={150}
        aria-label="Loading Spinner"
        data-testid="loader"
      />
    </div>
  );
}

export default App;
import React from "react";
import ClipLoader from "react-spinners/ClipLoader";

const override: React.CSSProperties = {
  display: "block",
  margin: "0 auto",
  borderColor: "red",
};

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

  render() {
    return (
      <div className="sweet-loading">
        <ClipLoader
          cssOverride={override}
          size={150}
          color={"#123abc"}
          loading={this.state.loading}
          speedMultiplier={1.5}
          aria-label="Loading Spinner"
          data-testid="loader"
        />
      </div>
    );
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true;
color: "#000000";
cssOverride: {}
speedMultiplier: 1;

All valid HTML props such as aria-* and data-* props are fully supported.

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

cssOverride prop

The cssOverride prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid 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.

Loadersizeheightwidthradiusmargin
BarLoader4100
BeatLoader152
BounceLoader60
CircleLoader50
ClimbingBoxLoader15
ClipLoader35
ClockLoader50
DotLoader602
FadeLoader15522
GridLoader15
HashLoader502
MoonLoader602
PacmanLoader252
PropagateLoader15
PuffLoader60
PulseLoader152
RingLoader602
RiseLoader152
RotateLoader152
ScaleLoader35422
SyncLoader152
fmlxcustomcomponent@shesha/reactjs@richard512/shareableasset-bridgeatx-filemanager@borderfreefinancial/revo-consumer@borderfreefinancial/revo-core@borderfreefinancial/revo-core-api@borderfreefinancial/revo-web-video-test@borderfreefinancial/elements-reactcodemirror_editor_publishcodemirror_ide@classtinginc/design-systemreact-ui-components-libcostco-common-lib@bradleymarques/react-json-schema-form-builderreact-jsonschema-form-editornss-react-lib@bytron/ops-boarddefi-finder-calculatoramerican-golf-kiosk@aaruraa/aarura-componentsbp-paywalaripax-design-systemcf-storybook@njradford/libshi-qo-data-generator-clientsia-streammongodb-backup-guialcide-skan-viewerstreamline-pkg@403page/fourothree-themetn-ownerscirplus-frontend@me-test/react-componentsppe-tableenotarylog-clientbioinformatics-hub-uileihuo-cloud-game-reactquantic-uirootservercheck@next-zero/framework@bradleymarques/react-json-schema-form-builder-forkrustamfetullayev-corerustam-core-uitest-fogito-core-ui@custiv/design-system@agney/neetouilib-liberty-v-01lib-liberty-v-02lib-liberty-v-03lib-liberty-versionlibrary-liberty-version-0.0.1library-liberty-version-1.1.2@roboholix/shared-componentsgrs-pager@epignosis_llc/gnosis1natana-web-uicustomizable-react-uifogito-core-ui-testarclight-reactxh-common-pcksandro-generic-tile8sandro-generic-tile9oasis-game-components@rakuten-rampage/rampagemy-carpetsvf-pattern-library@vimbu/storybookref-ui@coverdash/quotes-componenthomefile-storybook-chakrapasswordless-widgetwidget_tikket@nexatlas-os/nexds-web@clubessentialholdings/ui-components@clubessentialholdings/commons-ui@plateer/create-x2bee-app@pixiebrix/extensionladys-npm-basekuchkr-react-component-libraryui-lib-dipaimaycur-businessattrition-app@everything-registry/sub-chunk-2614@crown-react/third-serverboxfusion-test-module@public-react-components/third@alancleyton67/dsdemolibelseware-ui@bitbybit-labs/bbb-componentscompanyon-formbuilder@novin/ray-panel-calendar@spencerlepine/connect-chat-interface@public-react-statics/importer-in-third@public-react-components-packages/gimhaelib-cbvisuallezzauthkana-widgetkoodoo-question-journey-design-system
0.13.8

1 year ago

0.13.6

1 year ago

0.13.7

1 year ago

0.13.5

1 year ago

0.13.0

2 years ago

0.13.1

2 years ago

0.13.2

2 years ago

0.13.3

2 years ago

0.13.4

2 years ago

0.12.0-beta.1

2 years ago

0.13.0-beta.1

2 years ago

0.13.0-beta.2

2 years ago

0.13.0-beta.7

2 years ago

0.13.0-beta.5

2 years ago

0.13.0-beta.6

2 years ago

0.13.0-beta.3

2 years ago

0.13.0-beta.4

2 years ago

0.12.0

2 years ago

0.13.0-alpha.5

2 years ago

0.13.0-alpha.4

2 years ago

0.13.0-alpha.3

2 years ago

0.13.0-alpha.1

2 years ago

0.12.0-alpha.3

2 years ago

0.12.0-alpha.2

2 years ago

0.12.0-alpha.1

3 years ago

0.11.0

3 years ago

0.11.0-beta.1

3 years ago

0.11.0-alpha.8

3 years ago

0.11.0-alpha.7

3 years ago

0.11.0-alpha.6

3 years ago

0.11.0-alpha.5

3 years ago

0.11.0-alpha.4

3 years ago

0.11.0-alpha.3

3 years ago

0.10.6

3 years ago

0.10.4

3 years ago

0.10.3

3 years ago

0.10.2

3 years ago

0.11.0-alpha.2

3 years ago

0.11.0-alpha.1

3 years ago

0.10.1

3 years ago

0.10.0

3 years ago

0.10.0-beta.3

3 years ago

0.10.0-beta.2

3 years ago

0.10.0-beta.1

3 years ago

0.10.0-alpha.3

3 years ago

0.10.0-alpha.2

3 years ago

0.10.0-alpha.1

3 years ago

0.9.0

4 years ago

0.8.3

4 years ago

0.8.2

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.7.0-beta.1

4 years ago

0.7.0-alpha.5

4 years ago

0.7.0-alpha.4

4 years ago

0.7.0-alpha.3

4 years ago

0.7.0-alpha.2

4 years ago

0.7.0-alpha.1

4 years ago

0.6.1

5 years ago

0.6.0

5 years ago

0.6.0-beta.1

5 years ago

0.6.0-alpha.10

5 years ago

0.6.0-alpha.9

5 years ago

0.6.0-alpha.8

5 years ago

0.6.0-alpha.7

5 years ago

0.6.0-alpha.6

5 years ago

0.6.0-alpha.5

5 years ago

0.6.0-alpha.4

5 years ago

0.6.0-alpha.3

5 years ago

0.6.0-alpha.2

5 years ago

0.6.0-alpha.1

5 years ago

0.6.0-alpha.0

5 years ago

0.5.13

5 years ago

0.5.12

5 years ago

0.5.11

5 years ago

0.5.9

5 years ago

0.5.8

5 years ago

0.5.7

5 years ago

0.5.6

5 years ago

0.5.5

5 years ago

0.5.4

5 years ago

0.5.3

5 years ago

0.5.2

5 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.6

5 years ago

0.4.5

6 years ago

0.4.4

6 years ago

0.4.3

6 years ago

0.4.2

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.3

6 years ago

0.3.2

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.6

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.30

7 years ago

0.0.29

7 years ago

0.0.28

7 years ago

0.0.27

7 years ago

0.0.26

7 years ago

0.0.25

7 years ago

0.0.24

7 years ago

0.0.23

7 years ago

0.0.22

7 years ago

0.0.21

7 years ago

0.0.20

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago

0.0.0

7 years ago

1.0.0

7 years ago