Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Small Spinner
Next: Primary Color Spinner

Large Spinner

A prominent React spinner with size-8 (32px) for full-screen loading and high-visibility states built with shadcn/ui Spinner

Tiny spinners get lost on full-screen loading overlays. This React pattern shows size-8 Spinner (32px)—large spinner commanding attention for critical operations. Built with shadcn/ui Spinner with size-8 className doubling from default 16px to prominent 32px, it's perfect for full-screen loading overlays, initial page load, blocking operations, splash screens, major data processing, or any loading state where spinner is primary focus and visibility must be maximized for user confidence.

Large Spinner preview

Scroll to load preview

Installation

Default Spinner

Standard size-4 spinner

Small Spinner

Smaller size-3 for subtle loading

Full Page Loading

Centered spinner with overlay

Inline with Text

Spinner with text context

Loading Dialog

Dialog with loading state

Loading Card

Card with centered spinner

FAQ

Was this page helpful?

Sign in to leave feedback.

Small Spinner

A compact React spinner with size-3 (12px) for subtle loading indicators and inline status built with shadcn/ui Spinner

Primary Color Spinner

A React spinner with primary brand color for branded loading states and emphasized operations built with shadcn/ui Spinner