CSS Loader Generator

CSS loading animations rely on two building blocks: a shape drawn with borders, transforms, or box-shadow, and a @keyframes rule that moves it on a loop. Six loader styles are built into this tool, each using a different technique. Ring and Dual Ring use the border trick, coloring part of a circle's edge differently and spinning it with rotate. Dots and Bars stagger the same animation across several elements using animation-delay, so each piece moves a beat behind the last. Pulse scales and fades a single circle, and Ripple expands a ring outward while its opacity drops to zero, the same effect used for radar-style loading indicators.

Pick a style, then adjust size, color, thickness, and speed with the controls below the preview. Size changes the shape's overall dimensions, thickness controls border width on the ring-based styles, color updates every element in the animation at once, and speed sets how many seconds one loop takes, from quick and energetic to slow and calm. The preview background switcher lets you check how the loader reads against white, gray, and dark surfaces before you commit to a color, since a light-colored ring can lose contrast on a pale background.

Once it looks right, copy the CSS block, which includes the keyframes and the class rule, plus the small HTML snippet needed to render it. Nothing is uploaded; the loader is generated and rendered entirely in your browser.