npmpackage.info

Gathering detailed insights and metrics for react-spinners

Other packages similar to react-spinners

react-spinners-kit

1.9.1

A collection of loading spinners

spinners-react

1.0.11

Lightweight SVG/CSS spinners for React

react-spinners-components

2.0.4

Very easy to use loading spinners for React

react-native-progress

5.0.1

Progress indicators and spinners for React Native using ReactART

Gathering detailed insights and metrics for react-spinners

react-spinners - 0.17.0 | npmpackage.info

react-spinners

A collection of loading spinner components for react

0.17.0

3,273

MIT

TypeScript

214.96 kB

Installations

npm install react-spinners

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.6.0

NPM Version

10.8.2 Pull Requests

Open

1

Total

597

Closed

254

Merged

342

Issues

Open

13

Total

127

Closed

114

Releases

v0.17.0

Updated on Apr 21, 2025

v0.16.1

Updated on Apr 14, 2025

v0.16.0

Updated on Apr 14, 2025

v0.15.0

Updated on Dec 06, 2024

0.14.1

Updated on Jun 26, 2024

0.14.0

Updated on Jun 26, 2024

View All 20 releases

Languages

TypeScript

JavaScript

Ruby

Shell

TypeScript (88.54%)

JavaScript (6.2%)

Ruby (5.14%)

Shell (0.11%)

Developer

davidhu2000

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

3,273 Stars

889 Commits

283 Forks

17 Watchers

5 Branches

21 Contributors

Updated on Jul 12, 2025

Maintainers

View All 21 Contributors

Package Meta Information

Latest Version

0.17.0

Package Id

react-spinners@0.17.0

Unpacked Size

214.96 kB

Size

18.40 kB

File Count

119

NPM Version

10.8.2

Node Version

22.6.0

Published on

Apr 21, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

React Spinners

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:

1yarn add react-spinners

With npm:

1npm 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

1import { useState, CSSProperties } from "react";
2import { ClipLoader } from "react-spinners";
3
4const override: CSSProperties = {
5  display: "block",
6  margin: "0 auto",
7  borderColor: "red",
8};
9
10function App() {
11  let [loading, setLoading] = useState(true);
12  let [color, setColor] = useState("#ffffff");
13
14  return (
15    <div className="sweet-loading">
16      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
17      <input
18        value={color}
19        onChange={(input) => setColor(input.target.value)}
20        placeholder="Color of the loader"
21      />
22
23      <ClipLoader
24        color={color}
25        loading={loading}
26        cssOverride={override}
27        size={150}
28        aria-label="Loading Spinner"
29        data-testid="loader"
30      />
31    </div>
32  );
33}
34
35export default App;

Example using React Class

1import React from "react";
2import { ClipLoader } from "react-spinners";
3
4const override: React.CSSProperties = {
5  display: "block",
6  margin: "0 auto",
7  borderColor: "red",
8};
9
10class AwesomeComponent extends React.Component {
11  constructor(props) {
12    super(props);
13    this.state = {
14      loading: true,
15    };
16  }
17
18  render() {
19    return (
20      <div className="sweet-loading">
21        <ClipLoader
22          cssOverride={override}
23          size={150}
24          color={"#123abc"}
25          loading={this.state.loading}
26          speedMultiplier={1.5}
27          aria-label="Loading Spinner"
28          data-testid="loader"
29        />
30      </div>
31    );
32  }
33}

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.

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`

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-spinners

Other packages similar to react-spinners

react-spinners

Installations

Developer Guide

Yes

CommonJS

22.6.0

10.8.2

Pull Requests

1

597

254

342

Issues

13

127

114

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Spinners

Demo

Installation

Usage

Example

Available Loaders, PropTypes, and Default Values

color prop

cssOverride prop

size, height, width, and radius props

10

10

10

10

10

5

0

0

0

0

0

6

/10

`color` prop

`cssOverride` prop

`size`, `height`, `width`, and `radius` props