react-loader-z

react-loader-z

LIVE EXAMPLE

---

---

🌀 React Loader Components

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.

---

📦 Installation

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

---

🚀 Quick Usage

import React from 'react';
import {
  LoaderBar,
  LoaderChaseDots,
  LoaderCircularDots,
  LoaderCubeGrid,
  LoaderDotsCircle,
  LoaderDoubleBounce,
  LoaderFoldingCube,
  LoaderLinear,
  LoaderLinearDots,
  LoaderPulse,
  LoaderRing,
  LoaderSpinner,
  LoaderWave,
} from 'react-loader-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} />
      </div>

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

---

⚡ React Loaders Collection

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

---

📦 Available Loaders

Loader Name	Preview (concept)	Description / Style	Key Props
LoaderBar	▓▓▓▓▓	Expanding bar	size, thickness, color
LoaderChaseDots	●●●●	Dots chasing in a circle	dots, size, speed
LoaderCircularDots	⭕ ●●●	Circular rotating dots	dots, dotSize, size, speed
LoaderCubeGrid	◼︎◼︎◼︎ ◼︎◼︎◼︎ ◼︎◼︎◼︎	3×3 pulsing cube grid	size, color, speed
LoaderDotsCircle	● ● ● ●	Dots fading around a circle	dots, size, speed
LoaderDoubleBounce	◎ ◎	2 bouncing scaling circles	size, color, 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
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
LoaderSpinner	⟳	Classic spinner	size, thickness, speed
LoaderTyping	● ● ●	Typing indicator	dots, speed, color
LoaderWave	≋≋≋	Wave bars animation	bars, height, speed
LoaderWaveDots	●●●●	Wave-style bouncing dots	dots, speed, color
LoaderInfinity	∞	Infinity loop animation	size, thickness, speed, color
LoaderAtom	⚛	Atom-like nucleus + orbiting dot	size, speed, color
LoaderWorm	~~~~~	Worm-like moving trail	length, speed, color
LoaderGalaxy	✦ ✧ ✦ ✧	Galaxy swirl rotating stars	stars, size, speed, color
LoaderHelix	DNA-like helix spiral	3D helix wave dots	dots, height, speed, color
LoaderOrbit	☉ ● ● ●	Orbiting dots around center	count, size, speed, color
LoaderDotsRotate	● ↻	Dots rotating around axis	dots, size, speed
LoaderSquareSpin	◼︎ ⟳	Square rotating 360°	size, color, speed
LoaderBarsFade	▌▌▌▌	Multiple fading vertical bars	bars, color, speed
LoaderClock	🕑	Clock-hand ticking	size, speed, color
LoaderHourglass	⧖	Hourglass flip animation	size, speed, color
LoaderPulseRing	◎◎◎	Expanding pulse rings	rings, size, speed
LoaderBounceDots	● ● ●	Dots bouncing up/down	dots, speed, color
LoaderStairs	▂▄▆█	Stair climbing animation	steps, speed, color
LoaderFireworks	✦ ✧ ✦ ✧	Burst particles like fireworks	particles, speed, color
LoaderPendulum	◉ —	Swinging pendulum dot	size, speed, color
LoaderSnake	█████	Snake-like slithering motion	length, speed, color
LoaderGear	⚙	Rotating gear	teeth, size, speed
LoaderTriangle	▲▲▲	Triangle rotating / bouncing	size, color, speed
LoaderHexagon	⬡	Hexagon spinning	size, color, speed

---

⚙️ 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.

---

📝 License

MIT © 2025