Loading Spinners, Progress Bars & Toasts
Spinners, progress bars, skeleton loaders and toast notifications that tell users what is happening — in the base style and 10 design aesthetics.
44 components · live preview · copy as HTML or JSX · free for commercial use
Base feedback (4)
Spinner
Feedback
Uses Tailwind's built-in animate-spin utility — no custom CSS required.
<div class="w-8 h-8 rounded-full border-4 border-slate-200 border-t-indigo-600 animate-spin"></div>Progress Bar
Feedback
<div class="w-full max-w-sm h-2.5 rounded-full bg-slate-200 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-indigo-600"></div>
</div>Skeleton Loader
Feedback
Also copy the CSS tab — this component needs its custom @keyframes to animate.
<div class="max-w-sm space-y-2">
<div class="h-4 w-3/4 rounded skeleton-shimmer"></div>
<div class="h-4 w-1/2 rounded skeleton-shimmer"></div>
</div>Toast Notification
Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="px-4 py-2 rounded-xl bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800 transition-colors">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-slate-900 text-white text-sm font-medium px-4 py-3 shadow-lg">
✅ Saved successfully!
</div>Minimal feedback
Spinner
Minimal · Feedback
<div class="w-8 h-8 rounded-full border-4 border-slate-200 border-t-slate-600 animate-spin"></div>Progress Bar
Minimal · Feedback
<div class="w-48 h-2.5 rounded-full bg-slate-200 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-slate-900"></div>
</div>Skeleton Loader
Minimal · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-slate-200"></div>
<div class="h-4 w-1/2 rounded bg-slate-200"></div>
</div>Toast Notification
Minimal · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-slate-900 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:bg-slate-800 transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-lg bg-white border border-slate-200 text-slate-900 text-sm font-medium px-4 py-3 ">
✅ Saved successfully!
</div>Neumorphism feedback
Spinner
Neumorphism · Feedback
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="w-8 h-8 rounded-full border-4 border-transparent border-t-slate-400 animate-spin"></div>
</div>Progress Bar
Neumorphism · Feedback
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="w-48 h-2.5 rounded-full bg-[#e0e5ec] shadow-[inset_2px_2px_4px_#a3b1c6,inset_-2px_-2px_4px_#ffffff] overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-slate-400"></div>
</div>
</div>Skeleton Loader
Neumorphism · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-[#e0e5ec] shadow-[inset_2px_2px_4px_#a3b1c6,inset_-2px_-2px_4px_#ffffff]"></div>
<div class="h-4 w-1/2 rounded bg-[#e0e5ec] shadow-[inset_2px_2px_4px_#a3b1c6,inset_-2px_-2px_4px_#ffffff]"></div>
</div>
</div>Toast Notification
Neumorphism · Feedback
Vanilla JavaScript — no framework required.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<button id="toast-trigger" class="bg-[#e0e5ec] text-slate-600 rounded-xl px-4 py-2 text-sm font-bold hover:shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-[#e0e5ec] text-slate-600 text-sm font-semibold px-4 py-3 shadow-[6px_6px_12px_#a3b1c6,-6px_-6px_12px_#ffffff]">
✅ Saved successfully!
</div>
</div>Glassmorphism feedback
Spinner
Glassmorphism · Feedback
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="w-8 h-8 rounded-full border-4 border-white/30 border-t-white animate-spin"></div>
</div>Progress Bar
Glassmorphism · Feedback
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="w-48 h-2.5 rounded-full bg-white/20 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-white"></div>
</div>
</div>Skeleton Loader
Glassmorphism · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-white/20"></div>
<div class="h-4 w-1/2 rounded bg-white/20"></div>
</div>
</div>Toast Notification
Glassmorphism · Feedback
Vanilla JavaScript — no framework required.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<button id="toast-trigger" class="bg-white/20 backdrop-blur-md text-white rounded-xl px-4 py-2 text-sm font-bold hover:bg-white/30 transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-white/20 backdrop-blur-md border border-white/30 text-white text-sm font-semibold px-4 py-3 shadow-lg">
✅ Saved successfully!
</div>
</div>Neubrutalism feedback
Spinner
Neubrutalism · Feedback
<div class="w-8 h-8 rounded-full border-4 border-black border-t-yellow-300 animate-spin"></div>Progress Bar
Neubrutalism · Feedback
<div class="w-48 h-2.5 rounded-none bg-white border-[3px] border-black overflow-hidden">
<div class="h-full w-2/3 rounded-none bg-yellow-300"></div>
</div>Skeleton Loader
Neubrutalism · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-white border-[3px] border-black"></div>
<div class="h-4 w-1/2 rounded bg-white border-[3px] border-black"></div>
</div>Toast Notification
Neubrutalism · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-yellow-300 text-black rounded-none px-4 py-2 text-sm font-black hover:shadow-[2px_2px_0px_#000] hover:translate-x-[2px] hover:translate-y-[2px] transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-none bg-white border-[3px] border-black text-black text-sm font-black px-4 py-3 shadow-[6px_6px_0px_#000]">
✅ Saved successfully!
</div>Material feedback
Spinner
Material · Feedback
<div class="w-8 h-8 rounded-full border-4 border-blue-100 border-t-blue-600 animate-spin"></div>Progress Bar
Material · Feedback
<div class="w-48 h-2.5 rounded-full bg-blue-100 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-blue-600"></div>
</div>Skeleton Loader
Material · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-blue-100"></div>
<div class="h-4 w-1/2 rounded bg-blue-100"></div>
</div>Toast Notification
Material · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-blue-600 text-white rounded-lg px-4 py-2 text-sm font-medium hover:shadow-lg transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-lg bg-white text-slate-900 text-sm font-medium px-4 py-3 shadow-md">
✅ Saved successfully!
</div>Gradient feedback
Spinner
Gradient · Feedback
<div class="w-8 h-8 rounded-full border-4 border-purple-200 border-t-fuchsia-600 animate-spin"></div>Progress Bar
Gradient · Feedback
<div class="w-48 h-2.5 rounded-full bg-purple-100 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-gradient-to-r from-fuchsia-500 to-indigo-500"></div>
</div>Skeleton Loader
Gradient · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-purple-100"></div>
<div class="h-4 w-1/2 rounded bg-purple-100"></div>
</div>Toast Notification
Gradient · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-gradient-to-r from-fuchsia-500 via-purple-500 to-indigo-500 text-white rounded-xl px-4 py-2 text-sm font-bold hover:scale-105 transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-xl bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 text-white text-sm font-bold px-4 py-3 shadow-lg shadow-purple-500/40">
✅ Saved successfully!
</div>Cyberpunk feedback
Spinner
Cyberpunk · Feedback
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="w-8 h-8 rounded-full border-4 border-cyan-900 border-t-cyan-400 animate-spin"></div>
</div>Progress Bar
Cyberpunk · Feedback
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="w-48 h-2.5 rounded-lg bg-slate-800 border border-cyan-900 overflow-hidden">
<div class="h-full w-2/3 rounded-lg bg-cyan-400"></div>
</div>
</div>Skeleton Loader
Cyberpunk · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-slate-800 border border-cyan-900"></div>
<div class="h-4 w-1/2 rounded bg-slate-800 border border-cyan-900"></div>
</div>
</div>Toast Notification
Cyberpunk · Feedback
Vanilla JavaScript — no framework required.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<button id="toast-trigger" class="bg-slate-900 text-cyan-400 rounded-lg px-4 py-2 text-sm font-bold hover:shadow-[0_0_25px_rgba(34,211,238,0.9)] transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-lg bg-slate-900 border border-cyan-400 text-cyan-300 text-sm font-semibold px-4 py-3 shadow-[0_0_15px_rgba(34,211,238,0.6)]">
✅ Saved successfully!
</div>
</div>Retro feedback
Spinner
Retro · Feedback
<div class="w-8 h-8 rounded-full border-4 border-orange-200 border-t-orange-500 animate-spin"></div>Progress Bar
Retro · Feedback
<div class="w-48 h-2.5 rounded-full bg-orange-100 border-2 border-orange-400 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-gradient-to-r from-lime-300 to-lime-500"></div>
</div>Skeleton Loader
Retro · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-orange-100 border-2 border-orange-400"></div>
<div class="h-4 w-1/2 rounded bg-orange-100 border-2 border-orange-400"></div>
</div>Toast Notification
Retro · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-gradient-to-b from-lime-300 to-lime-500 text-slate-900 rounded-2xl px-4 py-2 text-sm font-black active:translate-y-1 active:shadow-none transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-2xl bg-orange-100 border-4 border-orange-400 text-orange-700 text-sm font-extrabold px-4 py-3 ">
✅ Saved successfully!
</div>Corporate feedback
Spinner
Corporate · Feedback
<div class="w-8 h-8 rounded-full border-4 border-slate-200 border-t-slate-700 animate-spin"></div>Progress Bar
Corporate · Feedback
<div class="w-48 h-2.5 rounded-md bg-slate-200 overflow-hidden">
<div class="h-full w-2/3 rounded-md bg-slate-700"></div>
</div>Skeleton Loader
Corporate · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-slate-200"></div>
<div class="h-4 w-1/2 rounded bg-slate-200"></div>
</div>Toast Notification
Corporate · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-slate-800 text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-slate-700 transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-md bg-white border border-slate-200 text-slate-800 text-sm font-semibold px-4 py-3 shadow-sm">
✅ Saved successfully!
</div>Playful feedback
Spinner
Playful · Feedback
<div class="w-8 h-8 rounded-full border-4 border-pink-200 border-t-pink-500 animate-spin"></div>Progress Bar
Playful · Feedback
<div class="w-48 h-2.5 rounded-full bg-pink-100 overflow-hidden">
<div class="h-full w-2/3 rounded-full bg-pink-400"></div>
</div>Skeleton Loader
Playful · Feedback
Simplified static placeholder shown here; the base catalog's Skeleton Loader has the animated shimmer.
<div class="w-48 space-y-2">
<div class="h-4 w-3/4 rounded bg-pink-100"></div>
<div class="h-4 w-1/2 rounded bg-pink-100"></div>
</div>Toast Notification
Playful · Feedback
Vanilla JavaScript — no framework required.
<button id="toast-trigger" class="bg-pink-200 text-pink-900 rounded-3xl px-4 py-2 text-sm font-bold hover:bg-pink-300 transition-all">
Show Toast
</button>
<div id="toast" class="fixed bottom-5 right-5 hidden items-center gap-2 rounded-3xl bg-yellow-50 border-2 border-yellow-200 text-yellow-800 text-sm font-bold px-4 py-3 ">
✅ Saved successfully!
</div>Picking the right feedback pattern
Use a spinner for short waits where you cannot measure progress, such as a button that is submitting. When you know how far along a task is — an upload or a multi-step import — show a progress bar instead, because visible progress makes the wait feel shorter. Skeleton loaders are best for content that is about to appear: they hold the space of the final layout, which prevents layout shift when the data arrives.
Toast notifications confirm that something happened without interrupting the user. The toast example uses a few lines of vanilla JavaScript to show the message and hide it again after 2.5 seconds.
Accessibility tips
Give spinners an accessible name, such as role="status" with visually hidden text like Loading…. Progress bars should expose their value with role="progressbar" and aria-valuenow. Respect reduced-motion preferences with motion-safe: or motion-reduce: variants, and keep toasts on screen long enough to read.
Frequently Asked Questions
When should I use a skeleton loader instead of a spinner?↓
Use a skeleton when you know the shape of the content that is loading, such as a list or a card. It reduces perceived wait time and prevents layout shift. Use a spinner for short waits without a known shape, like a button submit.
Does the toast notification need a framework?↓
No. The toast uses plain JavaScript to toggle the hidden and flex classes, so it works on any page. In React, keep the visible state in useState instead.
How do I make a spinner accessible?↓
Add role="status" to the spinner's container and include visually hidden text such as Loading… so screen readers announce it.
Last updated: