---
name: "@soonish"
slug: "soonish"
description: "91 loading animations for React, each on a 5×5 grid of dots, animated with plain CSS. Server Component-ready."
category: "Animated components"
tags: ["animation", "buttons", "loaders", "marketing", "onboarding", "payments"]
framework: "react"
license: "MIT"
author: "rushikeshmahajann"
website: "https://soonish.rushikeshmahajan.com"
github: "https://github.com/rushikeshmahajann/soonish"
registry: "https://soonish.rushikeshmahajan.com/r/registry.json"
pro: false
pro_url: null
github_stars: 5
component_count: 92
generated_at: "2026-10-10T06:32:55.998Z"
---

# @soonish

91 loading animations for React, each on a 5×5 grid of dots, animated with plain CSS. Server Component-ready.

## Links

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

## Install

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

## Components (92)

| name | type | description | install |
| --- | --- | --- | --- |
| soonish | registry:lib | The soonish loader engine: <Loader name="…" /> with all 91 5×5 pixel loaders. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/soonish.json` |
| sweep | registry:component | The "sweep" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/sweep.json` |
| diagonal | registry:component | The "diagonal" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/diagonal.json` |
| ripple | registry:component | The "ripple" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/ripple.json` |
| rain | registry:component | The "rain" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/rain.json` |
| spiral | registry:component | The "spiral" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/spiral.json` |
| snake | registry:component | The "snake" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/snake.json` |
| sparkle | registry:component | The "sparkle" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/sparkle.json` |
| heartbeat | registry:component | The "heartbeat" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/heartbeat.json` |
| scanner | registry:component | The "scanner" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scanner.json` |
| orbit | registry:component | The "orbit" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/orbit.json` |
| breathe | registry:component | The "breathe" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/breathe.json` |
| checker | registry:component | The "checker" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/checker.json` |
| stripes | registry:component | The "stripes" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/stripes.json` |
| falling | registry:component | The "falling" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/falling.json` |
| plasma | registry:component | The "plasma" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/plasma.json` |
| loadbar | registry:component | The "loadbar" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/loadbar.json` |
| knight-tour | registry:component | The "knight-tour" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/knight-tour.json` |
| vortex | registry:component | The "vortex" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/vortex.json` |
| sine-wave | registry:component | The "sine-wave" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/sine-wave.json` |
| life | registry:component | The "life" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/life.json` |
| quadrants | registry:component | The "quadrants" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/quadrants.json` |
| crossfade | registry:component | The "crossfade" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/crossfade.json` |
| glider | registry:component | The "glider" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/glider.json` |
| matrix | registry:component | The "matrix" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/matrix.json` |
| pong | registry:component | The "pong" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/pong.json` |
| concentric | registry:component | The "concentric" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/concentric.json` |
| twin-spirals | registry:component | The "twin-spirals" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/twin-spirals.json` |
| thinking | registry:component | The "thinking" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/thinking.json` |
| searching | registry:component | The "searching" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/searching.json` |
| finding | registry:component | The "finding" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/finding.json` |
| consolidating | registry:component | The "consolidating" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/consolidating.json` |
| streaming | registry:component | The "streaming" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/streaming.json` |
| reasoning | registry:component | The "reasoning" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/reasoning.json` |
| indexing | registry:component | The "indexing" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/indexing.json` |
| connecting | registry:component | The "connecting" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/connecting.json` |
| generating | registry:component | The "generating" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/generating.json` |
| reflecting | registry:component | The "reflecting" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/reflecting.json` |
| scale-ripple | registry:component | The "scale-ripple" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scale-ripple.json` |
| scale-wave | registry:component | The "scale-wave" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scale-wave.json` |
| scale-diag | registry:component | The "scale-diag" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scale-diag.json` |
| scale-pop | registry:component | The "scale-pop" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scale-pop.json` |
| scale-ring | registry:component | The "scale-ring" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scale-ring.json` |
| scale-check | registry:component | The "scale-check" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/scale-check.json` |
| twist | registry:component | The "twist" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/twist.json` |
| squash | registry:component | The "squash" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/squash.json` |
| jelly | registry:component | The "jelly" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/jelly.json` |
| pop-rotate | registry:component | The "pop-rotate" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/pop-rotate.json` |
| skew | registry:component | The "skew" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/skew.json` |
| heartbeat-scale | registry:component | The "heartbeat-scale" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/heartbeat-scale.json` |
| drop | registry:component | The "drop" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/drop.json` |
| burst | registry:component | The "burst" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/burst.json` |
| spiral-scale | registry:component | The "spiral-scale" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/spiral-scale.json` |
| zigzag | registry:component | The "zigzag" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/zigzag.json` |
| round | registry:component | The "round" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/round.json` |
| square-mandala | registry:component | The "square-mandala" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/square-mandala.json` |
| diamond-mandala | registry:component | The "diamond-mandala" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/diamond-mandala.json` |
| cross | registry:component | The "cross" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/cross.json` |
| x-diagonal | registry:component | The "x-diagonal" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/x-diagonal.json` |
| star-burst | registry:component | The "star-burst" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/star-burst.json` |
| petal | registry:component | The "petal" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/petal.json` |
| snowflake | registry:component | The "snowflake" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/snowflake.json` |
| gear | registry:component | The "gear" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/gear.json` |
| kaleido | registry:component | The "kaleido" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/kaleido.json` |
| spiral-mandala | registry:component | The "spiral-mandala" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/spiral-mandala.json` |
| pulse-square | registry:component | The "pulse-square" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/pulse-square.json` |
| check-mandala | registry:component | The "check-mandala" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/check-mandala.json` |
| octagon | registry:component | The "octagon" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/octagon.json` |
| lotus | registry:component | The "lotus" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/lotus.json` |
| outline | registry:component | The "outline" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/outline.json` |
| rings | registry:component | The "rings" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/rings.json` |
| rose | registry:component | The "rose" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/rose.json` |
| neon-drift | registry:component | The "neon-drift" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/neon-drift.json` |
| core-spiral | registry:component | The "core-spiral" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/core-spiral.json` |
| twin-orbit | registry:component | The "twin-orbit" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/twin-orbit.json` |
| prism-sweep | registry:component | The "prism-sweep" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/prism-sweep.json` |
| flux-columns | registry:component | The "flux-columns" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/flux-columns.json` |
| echo-ring | registry:component | The "echo-ring" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/echo-ring.json` |
| origin-wave | registry:component | The "origin-wave" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/origin-wave.json` |
| sonar | registry:component | The "sonar" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/sonar.json` |
| pinwheel | registry:component | The "pinwheel" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/pinwheel.json` |
| domino | registry:component | The "domino" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/domino.json` |
| corners | registry:component | The "corners" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/corners.json` |
| frame | registry:component | The "frame" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/frame.json` |
| front-sweep | registry:component | The "front-sweep" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/front-sweep.json` |
| ripple-echo | registry:component | The "ripple-echo" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/ripple-echo.json` |
| pulse-beat | registry:component | The "pulse-beat" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/pulse-beat.json` |
| lumen-bloom | registry:component | The "lumen-bloom" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/lumen-bloom.json` |
| raindrop | registry:component | The "raindrop" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/raindrop.json` |
| pendulum | registry:component | The "pendulum" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/pendulum.json` |
| firefly | registry:component | The "firefly" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/firefly.json` |
| halo | registry:component | The "halo" 5×5 pixel loader from soonish. | `npx shadcn@latest add https://soonish.rushikeshmahajan.com/r/halo.json` |

## For AI agents

```text
You are adding components from @soonish to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/soonish.md) for the component list.
2. Fetch the machine-readable index: https://soonish.rushikeshmahajan.com/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: soonish).
```