Gradient Loader Generator
Loading spinners in gradient colours — a ring, an orb, a pulse, dots or a bar. One element, pure CSS, no images or JavaScript.
One element, pure CSS
Each loader is a single <div> styled with gradients and one animation. The ring is a conic-gradient that fades from transparent into your colours, cut into a ring with a radial mask, then spun. The dots are three radial gradients in one background, moved with background-position. The bar is a repeating gradient exactly one bar wide, slid by that width so the loop never jumps.
Accessible loading states
The HTML includes role="status" and aria-label="Loading" so screen readers announce it. For people who turn on reduced motion, the loader slows down rather than stopping — a frozen spinner looks like a broken page.
Tips
Keep a loop between 0.8 and 1.5 seconds: faster feels frantic, slower feels stuck. On dark backgrounds, brighter colours and the orb work well; on light ones, the ring and dots read best. For a matching button, try the Gradient Button Generator.