CSS Loader Generator
Pick a loading animation style, color and size, and copy the loader HTML plus CSS.
Quick answer: enter your details below and click Generate loader code — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- Choose a loader style.
- Set the color as a hex value and the size in pixels.
- Click Generate loader code and paste the markup and CSS into your page.
About this tool
A loader tells visitors the page is still working instead of leaving them staring at a blank space. Choose a spinner, bouncing dots, a pulse or a sliding bar, set the color and size, and this tool writes the markup and the styles together. Paste both parts into your page and show the loader while content loads.
Frequently asked questions
Where do I put the markup and the CSS?
The markup goes where the loader should appear on the page, and the CSS goes in your stylesheet. Both parts are shown together so you can copy them in one go.
How do I hide the loader when loading finishes?
Remove the loader element or hide it once your content is ready. This tool only builds the animation itself, so the show-and-hide timing stays in your own page logic.