Loading Spinner Design
A curated collection of loading spinner patterns — from minimal indeterminate rings to branded skeleton states. Every pattern ships as a single Tailwind component with zero dependencies.
Border Spinner
The classic indeterminate ring. One transparent border, one accent border-top. Pure CSS animation.
Dot Bounce
Three dots with staggered animation-delay. Friendly and lightweight for inline loading states.
Pulse Ring
A soft pulsing circle using animate-pulse. Works well as a branded loading indicator with your accent color.
Gradient Conic
A spinning conic gradient from violet to pink. Brand-forward and visually distinctive.
Usage
Every pattern above is a single div with Tailwind utility classes. Copy the markup directly into any component. No JavaScript, no libraries, no keyframes to define — Tailwind handles the animation.