How to Add a CSS Loading Spinner to a Page
Loaders reassure visitors during waits. This guide compares spinners, dots, pulses and bars, and shows how to size and color them.
What is the CSS Loader Generator?
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.
How to use it
- 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.
Worked example
With the spinner style, a #6D28D9 color and a size of 40, the result is a loader div plus CSS for a 40px circle with a colored top border spinning once per second.
Which loader style should I use?
A spinner suits general page loads, dots suit chat-like waits, a pulse suits gentle background loading, and a bar suits progress-style waits. Pick the one that matches the mood of the page.
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.