Programming language: TypeScript
License: MIT License
Tags: UI Components     Loader    
Latest version: v0.13.4

react-spinners alternatives and similar libraries

Based on the "Loader" category.
Alternatively, view react-spinners alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-spinners or a related project?

Add another 'Loader' Library


React Spinners

npm version downloads license

<!-- next version -->

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 Page



With Yarn:

yarn add react-spinners

With npm:

npm install --save react-spinners


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.


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} />

export default App;

Example using React Class

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) {
    this.state = {
      loading: true,

  render() {
    return (
      <div className="sweet-loading">

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

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

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

*Note that all licence references and agreements mentioned in the react-spinners README section above are relevant to that project's source code only.