CSS Loader Generator

How to use this tool

1. Select a loader type.
2. Adjust size, color, and animation speed.
3. Copy the HTML and CSS for use in your project.

How CSS loaders work

A CSS loader is a small HTML shape animated with @keyframes, so the copied snippet needs no JavaScript or image file. Choose one of 16 patterns, then adjust its size, color, and animation duration. The generator namespaces its classes and keyframe names with tclg- to reduce clashes when a snippet is pasted beside other styles. Most motion uses transform and opacity, which usually avoid repeated layout work; test the result in the page where it will appear, especially when several loaders animate at once.

Choose a pattern for the waiting state

The catalog includes spinner, dots, bars, pulse, ring, and bouncing styles, plus orbit, ripple, equalizer, wave, chase, dual ring, flip, and hourglass animations. These small indicators fit short actions such as submitting a form or waiting for a search result. Skeleton creates three shimmering placeholder lines, which work well when a card or article layout is known before its content arrives. The indeterminate progress bar moves across a track to show ongoing work, but it does not measure completion or represent a percentage.

Accessible output and reduced motion

The “Include accessibility + reduced-motion support” option is enabled by default. Its HTML wraps the visual shape in role="status" and aria-live="polite", includes visually hidden “Loading…” text for assistive technology, and marks the decorative animation as hidden. The generated CSS also includes a prefers-reduced-motion: reduce rule that stops the animation for visitors who have asked their device to reduce motion. The loader remains as a static shape; it does not replace the actual loading message or provide progress details.

Use a spinner or bouncing dot when the wait is brief and its duration is unknown. Prefer skeleton lines when they mirror the content layout, such as rows in a dashboard, because their shape helps set expectations about what will appear. Use this indeterminate bar for an upload or calculation only while its progress cannot be measured; if your application knows the completed fraction, use a progress element that reports that value instead. In every case, remove the loading state when the operation finishes, and keep important error or completion messages available as text.