A collection of customizable React loading indicators (spinners, dots, gridsβ¦).
npm install react-loader-z---


!downloads
---
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.
---
``bash`
npm install react-loader-zor
yarn add react-loader-z
---
`tsx
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 (
{/ 2οΈβ£ LoaderChaseDots /}
---
β‘ 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.
---