---
name: "@loadercn"
slug: "loadercn"
description: "Animated loaders for React and shadcn/ui. Zero dependencies, pure CSS animation, no Tailwind required. Install with the shadcn CLI or copy one file."
category: "Animated components"
tags: ["3d", "animation", "charts", "glassmorphism", "loaders", "maps", "media", "text-effects"]
framework: "react"
license: "MIT"
author: "mnove"
website: "https://loadercn.vercel.app"
github: "https://github.com/mnove/loadercn"
registry: "https://loadercn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 2
component_count: 89
generated_at: "2026-10-10T06:32:55.998Z"
---

# @loadercn

Animated loaders for React and shadcn/ui. Zero dependencies, pure CSS animation, no Tailwind required. Install with the shadcn CLI or copy one file.

## Links

- Website: https://loadercn.vercel.app
- GitHub: https://github.com/mnove/loadercn
- Registry JSON: https://loadercn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/loadercn
- This file: https://sh4dcn.vercel.app/md/loadercn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://loadercn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://loadercn.vercel.app/r/registry.json
bunx shadcn@latest add https://loadercn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/mnove/loadercn.git
# fetch the raw registry index
curl -s https://loadercn.vercel.app/r/registry.json
```

## Components (89)

| name | type | description | install |
| --- | --- | --- | --- |
| chart-bars | registry:ui | Bars grow from a baseline in sequence, settle to new values, then clear. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-bars.json` |
| chart-line | registry:ui | A line draws across a small chart with a dot on its leading edge. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-line.json` |
| chart-sparkline | registry:ui | A live sparkline scrolls past while a dot tracks the latest value. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-sparkline.json` |
| chart-donut | registry:ui | Three segments sweep around a turning ring one after another, then unwind in the same direction. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-donut.json` |
| chart-dot-area | registry:ui | A smooth wave rolls across a dot matrix, lighting the area beneath its crest. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-area.json` |
| chart-dot-series | registry:ui | Three dotted lines flow in layers, fading with depth like a multi-series chart. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-series.json` |
| chart-dot-scatter | registry:ui | A scatter of dots drifts in to hug a trend line, then loosens again. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-scatter.json` |
| chart-dot-sparkline | registry:ui | A lead dot draws a smooth sparkline that trails behind it and fades away. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-sparkline.json` |
| chart-heartbeat | registry:ui | A dot traces a heartbeat line, leaving a trail that fades behind it. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-heartbeat.json` |
| chart-dot-gauge | registry:ui | A needle sweeps a dotted dial, lighting the dots up to the current reading. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-gauge.json` |
| chart-dot-radar | registry:ui | A radar outline shifts as dotted spokes extend and retract to new values. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-radar.json` |
| chart-dot-bubbles | registry:ui | Translucent bubbles drift through smooth loops while their sizes breathe. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-dot-bubbles.json` |
| chart-streaming | registry:ui | Streams of trailing dots flow through wavy lanes that spread and gather like a ribbon. | `npx shadcn@latest add https://loadercn.vercel.app/r/chart-streaming.json` |
| grid-wave | registry:ui | A diagonal wave, one cell at a time. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-wave.json` |
| grid-pulse | registry:ui | Nine points. One steady heartbeat. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-pulse.json` |
| grid-snake | registry:ui | A little light taking the scenic route. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-snake.json` |
| grid-shuffle | registry:ui | An orderly grid with a playful rhythm. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-shuffle.json` |
| grid-ripple | registry:ui | A soft ripple across a field of square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-ripple.json` |
| grid-checker | registry:ui | Two halves, perfectly out of step. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-checker.json` |
| grid-perimeter | registry:ui | A bright cell traces the edge, leaving a soft trail. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-perimeter.json` |
| grid-puzzle | registry:ui | Eight tiles take turns making room for one another. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-puzzle.json` |
| grid-flip | registry:ui | A diagonal ripple of tiles turning over in space. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-flip.json` |
| grid-spiral | registry:ui | A light winds into the center, then retraces its steps. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-spiral.json` |
| grid-lattice | registry:ui | Nine fixed-size dots breathe through the space between them. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-lattice.json` |
| grid-assemble | registry:ui | Loose particles settle into a grid, pause, and drift apart. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-assemble.json` |
| grid-scan | registry:ui | A compact dot matrix with a bright band scanning row by row. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-scan.json` |
| grid-scan-squares | registry:ui | A row-by-row light scan across sixteen fixed square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-scan-squares.json` |
| grid-column-scan | registry:ui | A bright band travels down each column, then moves to the next. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-column-scan.json` |
| grid-diagonal-scan | registry:ui | A diagonal light band sweeps across a fixed square matrix. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-diagonal-scan.json` |
| grid-diagonal-flow | registry:ui | A broad diagonal band smoothly brightens and fades across fixed square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-diagonal-flow.json` |
| grid-dot-sweep | registry:ui | A soft diagonal band sweeps across a faint dot matrix, swelling each dot as it passes. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-dot-sweep.json` |
| grid-scan-bounce | registry:ui | A bright row scans down and back up without moving the dots. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-scan-bounce.json` |
| grid-flow-down | registry:ui | A broad, eased brightness wave flows top to bottom across fixed square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-flow-down.json` |
| grid-flow-up | registry:ui | A broad, eased brightness wave flows bottom to top across fixed square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-flow-up.json` |
| grid-flow-right | registry:ui | A broad, eased brightness wave flows left to right across fixed square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-flow-right.json` |
| grid-flow-left | registry:ui | A broad, eased brightness wave flows right to left across fixed square cells. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-flow-left.json` |
| grid-scan-bounce-horizontal | registry:ui | A bright column scans left to right and back across fixed dots. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-scan-bounce-horizontal.json` |
| orbit-binary | registry:ui | Two bodies in a shared little universe. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-binary.json` |
| orbit-atom | registry:ui | Three intersecting paths. Endless motion. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-atom.json` |
| orbit-satellite | registry:ui | A small companion, always in motion. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-satellite.json` |
| orbit-eclipse | registry:ui | Two paths that meet, then drift apart. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-eclipse.json` |
| orbit-resonance | registry:ui | Concentric orbits finding their rhythm. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-resonance.json` |
| orbit-trio | registry:ui | Three points moving in perfect company. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-trio.json` |
| orbit-figure-eight | registry:ui | Two particles weave through a continuous infinity loop. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-figure-eight.json` |
| orbit-comet | registry:ui | A bright head pulls a tapered trail around its orbit. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-comet.json` |
| orbit-nested | registry:ui | A moon circles a planet while both orbit their star. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-nested.json` |
| orbit-precession | registry:ui | A particle circles an ellipse as the whole orbit slowly turns. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-precession.json` |
| orbit-exchange | registry:ui | Two particles trade inner and outer tracks as they circle. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-exchange.json` |
| orbit-slingshot | registry:ui | A particle races past its star and coasts around the far side. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-slingshot.json` |
| orbit-tilted-atom | registry:ui | Two luminous arcs travel around crossing, tilted orbital planes. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-tilted-atom.json` |
| classic-ring | registry:ui | A clean, incomplete ring in continuous rotation. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-ring.json` |
| classic-spokes | registry:ui | Twelve radial spokes brighten in sequence. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-spokes.json` |
| classic-dotted | registry:ui | A circle of dots passes a soft light around its edge. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-dotted.json` |
| classic-dual-ring | registry:ui | Two concentric arcs rotate in opposite directions. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-dual-ring.json` |
| classic-chasing-dots | registry:ui | Two dots chase around a circle, growing and shrinking. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-chasing-dots.json` |
| classic-chasing-dots-trio | registry:ui | Three evenly spaced dots chase around a circle, growing and shrinking in sequence. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-chasing-dots-trio.json` |
| classic-bouncing-dots | registry:ui | Three dots take turns rising and landing. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-bouncing-dots.json` |
| classic-typing | registry:ui | Three dots gently swell and fade in a familiar typing rhythm. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-typing.json` |
| classic-equalizer | registry:ui | Five rounded bars rise and fall in a smooth, flowing wave. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-equalizer.json` |
| classic-progress | registry:ui | A short segment glides across a quiet horizontal track. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-progress.json` |
| classic-ripple | registry:ui | Three rings expand outward and dissolve. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-ripple.json` |
| classic-squares | registry:ui | Two outlined squares turn around a shared center. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-squares.json` |
| classic-folding-cube | registry:ui | Four tiles fold and unfold in a continuous clockwise sequence. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-folding-cube.json` |
| classic-dot-stream | registry:ui | Five dots flow across a line, growing at the center and fading at the edges. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-dot-stream.json` |
| classic-liquid-stream | registry:ui | A flowing stream of dots softly merges and separates. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-liquid-stream.json` |
| classic-pulsing-spokes | registry:ui | A radial wave of spokes stretches into view and fades away. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-pulsing-spokes.json` |
| classic-circular-tail | registry:ui | A continuous fading arc sweeps around a circular track. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-circular-tail.json` |
| classic-morph | registry:ui | A square softens into a circle and turns back into shape. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-morph.json` |
| classic-hourglass | registry:ui | Sand slips between two chambers before the hourglass turns over. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-hourglass.json` |
| orbit-radar | registry:ui | A rotating sweep reveals fleeting signals on a quiet circular dial. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-radar.json` |
| grid-conveyor | registry:ui | Rows of tiles slide in opposite directions on an endless conveyor. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-conveyor.json` |
| orbit-helix | registry:ui | Two linked strands turn through a gentle helix. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-helix.json` |
| classic-dot-morph | registry:ui | A dotted outline shifts from circle to triangle to square. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-dot-morph.json` |
| classic-circuit | registry:ui | Bright signals travel along three quiet circuit tracks. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-circuit.json` |
| grid-render | registry:ui | Tiles fill in reading order, hold, and fade for the next pass. | `npx shadcn@latest add https://loadercn.vercel.app/r/grid-render.json` |
| network-deduce | registry:ui | A signal branches through successive layers of a small decision tree. | `npx shadcn@latest add https://loadercn.vercel.app/r/network-deduce.json` |
| network-synthesize | registry:ui | Three streams pass through intermediate nodes and meet at one output. | `npx shadcn@latest add https://loadercn.vercel.app/r/network-synthesize.json` |
| orbit-focus | registry:ui | Scattered ellipses settle into concentric rings before drifting apart. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-focus.json` |
| network-associate | registry:ui | Small groups of nodes reveal a changing sequence of connections. | `npx shadcn@latest add https://loadercn.vercel.app/r/network-associate.json` |
| orbit-particle-globe | registry:ui | A dotted sphere turns with soft shading from back to front. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-particle-globe.json` |
| orbit-breathing-orb | registry:ui | Waves of gentle expansion pass across a quiet particle sphere. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-breathing-orb.json` |
| orbit-latitude-globe | registry:ui | Dotted latitude bands turn around a tilted globe with travelling signals. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-latitude-globe.json` |
| orbit-scanning-sphere | registry:ui | A luminous band scans across a softly shaded particle sphere. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-scanning-sphere.json` |
| orbit-thought-orb | registry:ui | Signals cross a sparse rotating sphere around a pulsing core. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-thought-orb.json` |
| orbit-morphing-sphere | registry:ui | A dotted sphere expands into a rounded cube and returns. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-morphing-sphere.json` |
| orbit-searching | registry:ui | A bright longitude sweep travels around a turning particle sphere. | `npx shadcn@latest add https://loadercn.vercel.app/r/orbit-searching.json` |
| classic-liquid-processing | registry:ui | Four parallel streams of liquid dots swell, merge, and separate as they flow. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-liquid-processing.json` |
| classic-processing | registry:ui | Packets flow through four parallel tracks, brightening at the center. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-processing.json` |
| classic-text-shimmer | registry:ui | A shimmer sweeps across four dotted text lines, revealing each dot as it passes. | `npx shadcn@latest add https://loadercn.vercel.app/r/classic-text-shimmer.json` |

## For AI agents

```text
You are adding components from @loadercn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/loadercn.md) for the component list.
2. Fetch the machine-readable index: https://loadercn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: loadercn).
```