🌀 react-loading-z

• A small collection of reusable loading indicators (spinners, dots, grids…) built with React + TypeScript.
• Each loader is an independent component that can be customized and combined with a backdrop.

🌟 Live Demo

👉 Codesandbox

📦 Installation

npm install react-loading-z
# or
yarn add react-loading-z

🚀 Quick Usage

import React from "react";
import {
  LoaderBar,
  LoaderChaseDots,
  // ...
} from "react-loading-z";

function Example() {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
        gap: 40,
        padding: 40,
        justifyItems: "center",
        background: "#f7f7f7",
      }}
    >
      {/* 1️⃣ LoaderBar */}
      <div>
        <h4>LoaderBar</h4>
        <LoaderBar size={120} color="#2196F3" speed={1.5} />

        {/*
        <LoaderBarCircle color="#03A9F4" size={60} />
        <LoaderBarProgress progress={45} color="#8BC34A" />
        <LoaderBarWave color="#E91E63" barCount={6} />
        */}
      </div>

      {/* 2️⃣ LoaderChaseDots */}
      <div>
        <h4>LoaderChaseDots</h4>
        <LoaderChaseDots size={60} color="#FF5722" speed={2} />
      </div>
    </div>
  );
}

⚡ React Loaders Collection

A collection of 40+ customizable loaders built with styled-components. All loaders support props like loading, size, color, speed, center, backdrop.

📦 Loader Library

This library provides a variety of loaders for React applications. Each loader can be customized via props such as size, color, speed, etc.

| Loader | Icon / Preview | Description | Props | | | ------------------------ | --------------------- | -------------------------------- | ------------------------------------- | --- | | LoaderBar | ▓▓▓▓▓ | Expanding bar | size, thickness, color | | | LoaderBounceCircle | ●●● | Bouncing circle | size, color, speed | | | LoaderBounceLine | ▬ ▬ ▬ | Bouncing line | length, speed, color | | | LoaderChaseDots | ●●●● | Dots chasing in a circle | dots, size, speed | | | LoaderCircularDots | ⭕ ●●● | Circular rotating dots | dots, dotSize, size, speed | | | LoaderClock | 🕑 | Clock-hand ticking | size, speed, color | | | LoaderCubeGrid | ◼︎◼︎◼︎ ◼︎◼︎◼︎ ◼︎◼︎◼︎ | 3×3 pulsing cube grid | size, color, speed | | | LoaderCubeRotate | ◼︎ ↻ | Rotating cube | size, color, speed | | | LoaderDotsCircle | ● ● ● ● | Dots fading around a circle | dots, size, speed | | | LoaderDoubleBounce | ◎ ◎ | 2 bouncing scaling circles | size, color, speed | | | LoaderFlipDots | ● ↻ | Flipping dots | dots, size, speed | | | LoaderFlipSquare | ◼︎ ↻ | Flipping square | size, color, speed | | | LoaderFoldingCube | ◼︎◼︎ | Folding 2D cube animation | size, color, speed | | | LoaderLinear | █████ | Linear progress bar (loop) | size, thickness, color | | | LoaderLinearDots | ●●● | Moving dots along a line | dots, size, speed | | | LoaderLinearDual | ⇆ | Dual moving bars | size, thickness, color | | | LoaderLinearFillWipe | ████ | Fill → wipe linear effect | size, thickness, speed | | | LoaderMeteor | ☄ | Falling meteor line effect | size, speed, color | | | LoaderMoon | 🌙 | Rotating crescent moon | size, speed, color | | | LoaderPulse | ● ↕ | Single pulsing circle | size, color, speed | | | LoaderPulseMulti | ● ● ● | Multiple pulsing dots | dots, size, speed | | | LoaderRing | ◌ | Rotating ring (spinner ring) | size, thickness, color | | | LoaderRipple | ◎ ◎ | Ripple expanding circles | size, color, speed | | | LoaderRippleCircle | ◎ ↻ | Circular ripple | size, color, speed | | | LoaderRotatePlane | ▪ ↻ | Rotating plane | size, color, speed | | | LoaderShadowPulse | ● ⇅ | Shadowed pulse effect | size, color, speed | | | LoaderSkew | ▢ ↘ | Skewing square | size, color, speed | | | LoaderSnakeDots | ~ ~ ~ | Snake-like moving dots | length, speed, color | | | LoaderSpinner | ⟳ | Classic spinner | size, thickness, speed | | | LoaderSpinnerDots | ● ↻ | Spinning dots | dots, size, speed | | | LoaderSpiral | 🌀 | Spiral rotating animation | size, color, speed | | | LoaderSquareSpin | ◼︎ ⟳ | Square rotating 360° | size, color, speed | | | LoaderStar | ★ | Rotating star | size, color, speed | | | LoaderSync | ⟳⟳ | Synchronizing spinners | size, color, speed | | | LoaderTornado | 🌪 | Tornado spinning effect | size, speed, color | | | LoaderTriangle | ▲▲▲ | Triangle rotating / bouncing | size, color, speed | | | LoaderTyping | ● ● ● | Typing indicator | dots, speed, color | | | LoaderWave | ≋≋≋ | Wave bars animation | bars, height, speed | | | LoaderWaveDots | ●●●● | Wave-style bouncing dots | dots, speed, color | | | LoaderAtom | ⚛ | Atom-like nucleus + orbiting dot | size, speed, color | | | LoaderDNA | 🧬 | DNA helix animation | dots, height, speed, color | | | LoaderElasticCircle | ◎⟲ | Elastic expanding circle | size, color, speed | | | LoaderFirework | ✦ ✧ ✦ ✧ | Burst particles like fireworks | particles, speed, color | | | LoaderFlame | 🔥 | Flickering flame effect | size, color, speed | | | LoaderGalaxy | ✦ ✧ ✦ ✧ | Galaxy swirl rotating stars | stars, size, speed, color | | | LoaderGear | ⚙ | Rotating gear | teeth, size, speed | | | LoaderGlitch | ▓▓▓ | Glitch effect / flickering | size, color, speed | | | LoaderHeartbeat | ♥ | Heartbeat pulse animation | size, color, speed | | | LoaderHelix | DNA-like helix spiral | 3D helix wave dots | dots, height, speed, color | | | LoaderHourglass | ⧖ | Hourglass flip animation | size, speed, color | | | LoaderInfinity | ∞ | Infinity loop animation | size, thickness, speed, color | | | LoaderJellyfish | 🪼 | Floating jellyfish animation | size, speed, color | | | LoaderLightning | ⚡ | Lightning strike animation | size, speed, color | | | LoaderMorph | ◼︎ ↔ | Morphing shape | size, color, speed | | | LoaderNeon | ✨ | Neon glowing effect | size, color, speed | | | LoaderOrbit | ☉ ● ● ● | Orbiting dots around center | count, size, speed, color | | | LoaderOrbital | ◎ ⟳ | Orbital rotating rings | size, speed, color | | | LoaderPacman | 🟡⏩ | Pacman eating dots animation | size, speed, color | | | LoaderPendulum | ◉ — | Swinging pendulum dot | size, speed, color | | | LoaderPlanet | 🪐 | Rotating planet | size, speed, color | | | LoaderRadar | 📡 | Radar scanning animation | size, speed, color | | | LoaderWorm | ~~~ | Worm-like moving trail | length, speed, color | |

⚙️ Props (General Guidelines)

Each loader comes with its own props interface. (common) Common optional props shared by many loaders include:

| Prop | Type | Default | Description | | ---------- | --------- | ----------- | ---------------------------------------------------------------- | | loading | boolean | true | Whether the loader is active/visible. | | size | number | undefined | Size of the loader (pixels). | | color | string | "#333" | Color of the loader animation. | | center | boolean | false | Center the loader within its container. | | backdrop | boolean | false | Show a semi-transparent backdrop behind the loader (fullscreen). |

Refer to individual component files for full prop details.

⚙️ Features

🎨 Multiple built-in loaders: spin, dots, bars, grid, wave...

⚡ Lightweight and dependency-free

🧩 Easy to integrate with overlays or modals

💅 Fully customizable with props and CSS

🧠 Written in TypeScript with type definitions included

📝 License

MIT