Loading UI

Overview

Loading UI is a free, open-source collection of CSS and React loaders, spinners and loading animations for building accessible loading states in web apps. Every loader on the homepage can be copied directly, and each one is also available through the @loading-ui shadcn registry.

The registry contains 47 loader components plus a style and a utility helper, and the components depend on Motion, clsx and tailwind-merge. Styles range from classic rings and dots to text effects for AI "thinking" states and ASCII-style block animations.

Features

• Rings and spinners: Ring, spokes, arc, dual arc, fade arc, concentric, orbit, satellite, clock and comet spinners.
• Dot loaders: Pulse, ripple, bobbing, bouncing, typing, twin orbit and triple-dot spinners.
• Text loaders: Text shimmer, shimmer wave, blink and animated dots for labels such as "Thinking".
• ASCII-style loaders: Accordion, symmetric wave, square grid, conveyor loop and square snake animations built from block characters.
• Shape loaders: Infinity, morphing infinity, diamond, wave and bars.
• Context loaders: Skeleton, terminal, analyzing-image and wandering-eyes animations.
• Copy or install: Copy any component from the site or add it with the shadcn CLI.

Tech stack

• React, Tailwind CSS, Motion

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @loading-ui/component-name