---
name: "@loading-ui"
slug: "loading-ui"
description: "Loading UI is a small, focused open-source shadcn/ui registry of spinners, loaders, and loading animations for React and Tailwind CSS apps, from the TurboStarter team. Ships 35+ named variants including Arc, Bars, Bobbing Dots, Classic, Clock Ring, Comet Spinner, Concentric Ring, Dash Ring, Diamond, Dots Ring, Dual Arc, Fade Arc, Infinity, Morphing Infinity, Orbit Ring, Pulsating Dots, Ring, Ripple, Satellite Ring, Skeleton, Spiral, Spokes, Swirling, Terminal, Text Blink, Text Dots, Text Shimmer Wave, Typing, Wandering Eyes, and Wave. Copy-paste and CLI-friendly; no animation framework dependency beyond Tailwind. MIT licensed. Use for: adding polished, intentional loading states to any React/Tailwind project without importing a full design system."
category: "Animated components"
tags: ["accessibility", "aesthetic", "animation", "design-system", "loaders", "media", "retro", "text-effects"]
framework: "react"
license: "MIT"
author: "turbostarter"
website: "https://loading-ui.com"
github: "https://github.com/turbostarter/loading-ui"
registry: "https://loading-ui.com/r/registry.json"
pro: false
pro_url: null
github_stars: 399
component_count: 50
generated_at: "2026-07-28T08:00:50.948Z"
---

# @loading-ui

Loading UI is a small, focused open-source shadcn/ui registry of spinners, loaders, and loading animations for React and Tailwind CSS apps, from the TurboStarter team. Ships 35+ named variants including Arc, Bars, Bobbing Dots, Classic, Clock Ring, Comet Spinner, Concentric Ring, Dash Ring, Diamond, Dots Ring, Dual Arc, Fade Arc, Infinity, Morphing Infinity, Orbit Ring, Pulsating Dots, Ring, Ripple, Satellite Ring, Skeleton, Spiral, Spokes, Swirling, Terminal, Text Blink, Text Dots, Text Shimmer Wave, Typing, Wandering Eyes, and Wave. Copy-paste and CLI-friendly; no animation framework dependency beyond Tailwind. MIT licensed. Use for: adding polished, intentional loading states to any React/Tailwind project without importing a full design system.

## Links

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

## Install

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

## Components (50)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://loading-ui.com/r/index.json` |
| style | registry:style | — | `npx shadcn@latest add https://loading-ui.com/r/style.json` |
| ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/ring.json` |
| spokes | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/spokes.json` |
| classic | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/classic.json` |
| dots-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/dots-ring.json` |
| spiral | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/spiral.json` |
| swirling | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/swirling.json` |
| arc | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/arc.json` |
| dual-arc | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/dual-arc.json` |
| fade-arc | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/fade-arc.json` |
| concentric-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/concentric-ring.json` |
| orbit-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/orbit-ring.json` |
| satellite-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/satellite-ring.json` |
| clock-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/clock-ring.json` |
| quarter-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/quarter-ring.json` |
| dash-ring | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/dash-ring.json` |
| comet-spinner | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/comet-spinner.json` |
| pulse | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/pulse.json` |
| ripple | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/ripple.json` |
| pulse-dot | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/pulse-dot.json` |
| dots | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/dots.json` |
| bobbing-dots | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/bobbing-dots.json` |
| bouncing-dots | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/bouncing-dots.json` |
| typing | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/typing.json` |
| twin-orbit | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/twin-orbit.json` |
| pulsating-dots | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/pulsating-dots.json` |
| triple-dot-spinner | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/triple-dot-spinner.json` |
| text-shimmer | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/text-shimmer.json` |
| text-blink | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/text-blink.json` |
| text-dots | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/text-dots.json` |
| text-shimmer-wave | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/text-shimmer-wave.json` |
| morphing-infinity | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/morphing-infinity.json` |
| infinity | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/infinity.json` |
| accordion-loader | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/accordion-loader.json` |
| symmetric-wave | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/symmetric-wave.json` |
| square-grid | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/square-grid.json` |
| square-accordion | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/square-accordion.json` |
| conveyor-loop | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/conveyor-loop.json` |
| square-snake | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/square-snake.json` |
| infinity-square-snake | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/infinity-square-snake.json` |
| infinity-track | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/infinity-track.json` |
| diamond | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/diamond.json` |
| wave | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/wave.json` |
| bars | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/bars.json` |
| analyzing-image | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/analyzing-image.json` |
| skeleton | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/skeleton.json` |
| terminal | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/terminal.json` |
| wandering-eyes | registry:component | — | `npx shadcn@latest add https://loading-ui.com/r/wandering-eyes.json` |
| utils | registry:lib | — | `npx shadcn@latest add https://loading-ui.com/r/utils.json` |

## For AI agents

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