Generate pure CSS loading spinners and animations. Customize size, color and speed, then copy the HTML and CSS. Free online CSS loader generator.
About this tool
Customize a CSS loading animation and copy its markup and styles.
How to use CSS Loader Generator
- Choose Spinner ring, Dual ring, Bouncing dots, Pulse, Bars or Flipping square.
- Set Size, Duration and Color.
- Copy both HTML and CSS into your page and test the animation.
Worked example
Use a compact spinner next to a loading message while a request is in progress.
Does the loader track request progress?
No. It is a visual animation. Your application must show or hide it when work starts or finishes.
Does the animation communicate status to screen readers?
Not by itself. Include an accessible status message and respect reduced-motion preferences in your implementation.
Explore CSS Tools · More practical guides