Browse components
Overlay Loaders
Overlay loaders for React and Tailwind CSS — full-screen and embedded loading states for pages, panels, and dialogs.
A centered spinner overlay for blocking a page or panel while content loads.
A light three-dot loading overlay with staggered motion.
Five staggered bars that create a compact equalizer-style loading overlay.
A card-shaped skeleton overlay for loading dashboards, forms, and content panels.
About Overlay Loaders Components
Overlay loaders communicate that an interface or part of it is temporarily busy. This collection includes full-page and embedded loading treatments for pages, panels, and dialogs.
Use the smallest loading state that explains the wait. An embedded overlay is usually clearer than blocking the entire page for work that affects only one panel.
Frequently asked questions
When should I use an overlay loader?
Use one while a page, dialog, or panel cannot be interacted with because it is loading or submitting. Prefer an inline state when the rest of the page remains usable.
How do I make a loader accessible?
Announce the loading state to assistive technology, preserve focus appropriately, and do not trap users behind a purely decorative animation.
Can I customize the loader style?
Yes. The source can be copied and adjusted with Tailwind classes for color, size, backdrop opacity, and loading label.