Loader Generator

How to use it

1. Pick a type: spinner ring, bouncing dots, progress bar, pulse rings or skeleton shimmer.
2. Drag size to scale the animation. For the progress bar it sets the track width; for the skeleton it sets the block height.
3. Set the cycle time in seconds. Lower values feel urgent, values around 1.5 s feel calm.
4. Choose a color for the moving part and a track color for the static part. The skeleton uses both as the two ends of its shimmer gradient.
5. Copy the CSS and the small HTML snippet. Paste both into your page; the demo box is running the exact same code.

Common use cases

• Button and form pending states - a small ring inside a submit button while a request runs.
• Content placeholders - skeleton blocks in the shape of the cards that are about to load.
• Route change feedback - a full-width bar under the header while the next page fetches.
• Upload and processing screens - dots or pulse rings keep a waiting screen from looking frozen.

Why it stays private

The animations are plain CSS keyframes assembled in the page, and the demo runs that same CSS through a scoped style element. Nothing is uploaded and no script runs on a server.

FAQ

Q: Why does the thickness slider disable for some types? A: Only the spinner ring and the progress bar have a part whose stroke width is independent of the overall size. Dots, pulse rings and the skeleton derive everything from the size value, so thickness would have no effect.

Q: Do these respect reduced-motion settings? A: The generated CSS animates unconditionally. For accessibility, wrap the animation rules in a @media (prefers-reduced-motion: reduce) block and swap in a static or slower fallback for users who ask for less motion.

Q: Which loader should I use for an unknown wait time? A: Indeterminate ones: the ring, dots, bar and pulse. They loop forever, so users are not shown a fake percentage. Reserve determinate progress for waits you can actually measure.

Q: Can I recolor the skeleton? A: Yes. The track color and the main color become the two ends of the shimmer gradient, so pick two close shades of your surface color for a subtle effect, or a contrasting pair for a stronger sweep.