# Docs

- [Introduction](/docs): Install loading-ui into your app and build loading states that feel intentional, lightweight, and easy to ship.
- [Usage](/docs/usage): Set up the loading-ui registry, install components with the shadcn CLI, and wire them into real loading states.
- [Philosophy](/docs/philosophy): The design principles behind loading-ui and how we think about loading states in product interfaces.
- [Components](/docs/components): Reference for loading indicators and related building blocks documented in this site.
- [Contributing](/docs/contributing): How to improve loading-ui, from documentation tweaks to new registry components.
- [Community](/docs/community): Where to ask questions, report issues, and share ideas about loading-ui.
- Components
  - [Accordion Loader](/docs/components/accordion-loader): A bidirectional unicode block trail that stretches across a static character track.
  - [Analyzing image](/docs/components/analyzing-image): A visual placeholder for image analysis or computer-vision style loading.
  - [Arc](/docs/components/arc): A curved indeterminate progress arc for loading and pending UI.
  - [Bars](/docs/components/bars): A bar-style activity indicator for lists, players, and dense layouts.
  - [Bobbing dots](/docs/components/bobbing-dots): Motion-driven dots that bounce in phase, playful loading for creative tools, media, and lighthearted flows.
  - [Bouncing dots](/docs/components/bouncing-dots): Elastic scale-and-opacity dots for bouncy inline feedback in queues, ingests, and playful waits.
  - [Classic](/docs/components/classic): A familiar spinner style that fits most apps and form contexts.
  - [Clock ring](/docs/components/clock-ring): A clock-hand style ring for scheduling, sync, and time-bound wait states.
  - [Comet spinner](/docs/components/comet-spinner): A rotating comet with a bright head and sweeping tail, great for energetic throughput states.
  - [Concentric ring](/docs/components/concentric-ring): Layered rings for a deep, technical loading look.
  - [Conveyor Loop](/docs/components/conveyor-loop): A one-way unicode block trail that wraps across a fixed text track.
  - [Dash ring](/docs/components/dash-ring): An SVG dash-stroke ring with morphing length, strong for streaming and indeterminate progress.
  - [Diamond](/docs/components/diamond): An 8-bit diamond loader with pixel-stepped opacity for retro-flavored waiting states.
  - [Dots ring](/docs/components/dots-ring): A ring of animated dots that scales with the parent container.
  - [Dots](/docs/components/dots): A classic blinking-dot row, perfect beside copy, in composers, and anywhere “typing” should read instantly.
  - [Dual arc](/docs/components/dual-arc): Two complementary arcs for a balanced indeterminate progress feel.
  - [Fade arc](/docs/components/fade-arc): A gradient arc spinner with a soft trailing fade for polished loading states.
  - [Infinity Square Snake](/docs/components/infinity-square-snake): A unicode snake tracing two joined square loops in an infinity path.
  - [Infinity Track](/docs/components/infinity-track): A tracked infinity loader made from monospace unicode cells and staggered block masks.
  - [Infinity](/docs/components/infinity): An infinity-path animation for long-running or continuous loading.
  - [Morphing infinity](/docs/components/morphing-infinity): An animated SVG that morphs between circle and infinity shapes.
  - [Orbit ring](/docs/components/orbit-ring): A ring with orbiting elements for a dynamic loading indicator.
  - [Pulsating dots](/docs/components/pulsating-dots): Dots with scale and opacity motion for a lively wait state.
  - [Pulse dot](/docs/components/pulse-dot): A single pulsing dot for chat and assistant UIs, the same minimal cue ChatGPT shows while a reply is generating.
  - [Pulse](/docs/components/pulse): A soft scaling ring for calm, breathable loading and standby states.
  - [Quarter ring](/docs/components/quarter-ring): A quarter-arc ring for compact spinners when space is tight but motion still matters.
  - [Ring](/docs/components/ring): A circular indeterminate loader for inline actions, page transitions, and general pending states.
  - [Ripple](/docs/components/ripple): Concentric expanding ripples for radar-like, soft indeterminate progress.
  - [Satellite ring](/docs/components/satellite-ring): A ring with a satellite dot that orbits the edge for propagation-style loading states.
  - [Skeleton](/docs/components/skeleton): A skeleton block placeholder for content that is still loading.
  - [Spiral](/docs/components/spiral): A spiral motion path for a distinctive busy state.
  - [Spokes](/docs/components/spokes): A segmented spinner for lightweight indeterminate loading states.
  - [Square Accordion](/docs/components/square-accordion): A square unicode track that pauses at each corner so the trailing blocks collapse behind the lead.
  - [Square Grid](/docs/components/square-grid): A tracked unicode square path with a block trail orbiting the outer edge.
  - [Square Snake](/docs/components/square-snake): A four-glyph unicode snake moving around a square path without a visible track.
  - [Swirling](/docs/components/swirling): A fluid swirl effect for high-motion loading affordances.
  - [Symmetric Wave](/docs/components/symmetric-wave): A mirrored unicode wave that pulses inward and outward along a ten-cell track.
  - [Terminal](/docs/components/terminal): A terminal or CLI style loader for developer-facing experiences.
  - [Text blink](/docs/components/text-blink): A blinking text treatment for in-place loading copy.
  - [Text dots](/docs/components/text-dots): Trailing or inline dots for ongoing status text.
  - [Text shimmer wave](/docs/components/text-shimmer-wave): A wave of shimmer along text for animated placeholder copy.
  - [Text shimmer](/docs/components/text-shimmer): A shimmer sweep across label text for premium loading states.
  - [Triple dot spinner](/docs/components/triple-dot-spinner): Three dots arranged in a compact rotating spinner for buttons and list rows.
  - [Twin orbit](/docs/components/twin-orbit): Two orbiting markers for a balanced circular loading animation.
  - [Typing](/docs/components/typing): Vertical wave dots that read like keystrokes in chat, search, and co-editing surfaces.
  - [Wandering eyes](/docs/components/wandering-eyes): A playful pair of animated eyes for expressive or brand-led loading states.
  - [Wave](/docs/components/wave): A wave of bars for audio, sync, or progress-adjacent loading.