CSS loader generator
Choose a loader style, size, color and speed and watch it run in the preview. Copy the matching HTML and CSS, which use no JavaScript or images.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Pick a style and adjust size, speed and color.
- Check the live preview.
- Copy the CSS and the HTML into your page.
How it works
The spinner is a circle with a border where one side is solid and the rest is a faint version of the same color, turned a full 360 degrees by a looping animation. Dots and bars are three children with staggered animation delays, a sixth and a third of the cycle apart. The pulse scales and fades one circle. Only transform and opacity are animated, which browsers can do without re-laying out the page.
Tips
- Keep the class name
loader or rename it in both the CSS and the HTML.
- Put the loader where the content will appear to avoid the page jumping.
- Under 1 second per cycle can feel frantic; 0.8 to 1.5 seconds is a common range (a rule of thumb).
Frequently asked questions
Does the loader need JavaScript?
No. It is a plain element animated with CSS keyframes. You show or hide it from your own code by adding or removing the element, or by toggling its display.
Is it accessible?
The markup includes role="status" and an aria-label so assistive technology can announce it. The CSS also slows the animation when a visitor has asked their system for reduced motion.
Can I change the colors later?
Yes. The color appears in the CSS as a normal value, and for the spinner the track is the same color at 20% opacity. Replace the hex values, or swap them for a CSS variable.
Why does the preview sit in a frame?
The preview is a small separate page that runs exactly the code shown below it, so what you see is what you copy and its styles cannot leak into the rest of this page.
Which browsers support it?
The code uses transforms, opacity and keyframe animation, which every current browser supports.