Loader Generator
Generate CSS-only loading spinners: ring, dual ring, dots, bars, pulse and ping. Control size, colour and speed.
.loader {
width: 56px;
height: 56px;
border: 5.6px solid #6d5efc33;
border-top-color: #6d5efc;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }About the loader generator
Every loader here is pure CSS with no images and no JavaScript. Most are a single element using border tricks or transforms; the dots and bars use a few spans with staggered animation delays, which is what produces the wave effect.
Because they animate transform and opacity only, they stay smooth even while the page is busy loading the content they are waiting on.
How to use it
- 1Choose a loader style.
- 2Set the size and speed.
- 3Pick the colour.
- 4Copy the CSS, including the HTML comment showing the required markup.
Worth knowing
- Add role="status" and a visually hidden "Loading" label so screen readers announce the wait.
Questions
How do the staggered dots work?
Each dot runs the same animation with a different animation-delay, so they reach each stage slightly apart and the wave appears.
Do CSS loaders hurt performance?
No. They animate transform and opacity, which the compositor handles, so they keep running smoothly even while the main thread is busy.
How do I make a loader accessible?
Wrap it in an element with role="status" and include visually hidden text such as "Loading", otherwise a screen reader user has no idea anything is happening.