Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-custom-spinner

pratik-hole-32139MIT2.0.1TypeScript support: included

A collection of customizable and lightweight React CSS loader components.

react, spinner, loader, css-loader, react-spinner, loading-component, react-loading, custom-loader, react-css, animated-loader

readme

React Custom Spinner

🎡 A collection of beautiful and customizable React loader/spinner components.

NPM Version License React


📺 Demo

Check out the live demo of loaders gallery here:

Live Demo Link


✨ Features

  • 🎨 Multiple spinner types (Circle, ZigZag, etc.)
  • 🛠 Fully customizable (size, color, speed)
  • 💡 Easy to use in React projects
  • 🔥 Lightweight and optimized

📦 Installation

npm install react-custom-spinner
# or
yarn add react-custom-spinner

🚀 Usage

import React from "react";
import { CircleLoader, ZigZagLoader } from "react-custom-spinner";

function App() {
  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <CircleLoader loading size="50px" color="red" />
      <ZigZagLoader loading size="30px" color="blue" />
    </div>
  );
}

export default App;

🛠 Props

Prop Type Default Description
loading boolean true Show/hide the loader
size string "40px" Size of the loader
color string "#000" Color of the loader

🖼 Available Loaders

  • CircleLoader
  • ZigZagLoader
  • RotatingSquare
  • BarsLoader
  • DotsWave
  • DualRing
  • FadingDots
  • GrowingBars
  • PulseCircle
  • RippleLoader
  • BlinkingLoader
  • BounceCircleLoader
  • CubeBounceLoader
  • FlipDotLoader
  • HeartbeatLoader
  • PuffLoader
  • PulseSquareLoader
  • RingBounceLoader
  • RipplePulseLoader
  • ShimmerLineLoader
  • SlideInBarsLoader
  • SpinBubbleLoader
  • SpinDotsLoader
  • StretchBarLoader
  • TunnelSpinner

👨‍💻 Author

  • Pratik Hole

📄 License

This project is licensed under the ISC License.