Own the component.

Install readable React source through the shadcn registry, or copy it manually. The component lives in your project, ready to make your own.

Install

Run a registry command from a shadcn-initialized project. The component arrives under your configured components alias.

pnpm dlx shadcn@latest add https://loading.design/r/ring.json

Available items

Crescent/r/crescent.json

Comet/r/comet.json

Petal Wheel/r/petal-wheel.json

Flip Tiles/r/flip-tiles.json

Pendulum/r/pendulum.json

Waveform/r/waveform.json

Agent Pulse/r/agent-pulse.json

Neural Grid/r/neural-grid.json

Tool Chain/r/tool-chain.json

Search Sweep/r/search-sweep.json

Skeleton/r/skeleton.json

Bars/r/bars.json

Radar/r/radar.json

Segmented Ring/r/segmented-ring.json

Bouncing Dots/r/bouncing-dots.json

Shimmer Text/r/shimmer-text.json

Reasoning Pulse/r/reasoning-pulse.json

Image Generation/r/image-generation.json

Smooth Stream/r/smooth-stream.json

Orbit/r/orbit.json

Dual Arc/r/dual-arc.json

Dotted Ring/r/dotted-ring.json

Ripple/r/ripple.json

Dashed Ring/r/dashed-ring.json

Satellite/r/satellite.json

Pinwheel/r/pinwheel.json

Ring/r/ring.json

Thinking Dots/r/thinking-dots.json

Text Skeleton/r/text-skeleton.json

Structure

Each framework version includes the same loading pattern, accessible state, and reduced-motion behavior. Use the navigation selector to change the source and examples throughout the site.