Loaders
Pure CSS loaders, sorted by style: click one to copy its code
1–24 of 182
About this tool
This gallery offers 182 loading indicators written in plain HTML and CSS, with no JavaScript or images. They are split into eighteen categories, including spinners, dots, bars, progress, pulse, orbits, waves, 3D, glitch and text. Use them while waiting for an API response, loading a page or submitting a form, with an animation that blends into your interface.
Every loader follows the CSS color property, which makes it easy to match your theme. The color you pick in the tool is added at the top of the copied CSS, on the loader's root element. Animations rely on keyframes prefixed with mwb- to reduce name clashes with the ones already in your project. The gallery shows 24 designs per page.
How to use it
- Pick a category, or All to browse every loader.
- Set the Color to see the previews in your shade.
- Click a loader to open its code.
- Click Copy HTML and Copy CSS, then paste the HTML where the loading state shows and the CSS into your stylesheet.
Frequently asked questions
Do these loaders need JavaScript?
No, the animation is entirely CSS. In your app, JavaScript is only needed to show the loader while something is loading and hide it afterward, for example by adding or removing the element from the DOM.
How do I change the color of a loader I already copied?
The loaders use currentColor. Change the color property in the first rule of the copied CSS, or on a parent element, and the whole animation picks up the new color with no other edits.
Do the loaders work on a light background?
The previews are shown on a dark background, but the loaders do not depend on it: just pick a color with enough contrast against your page, such as dark gray on a white background.
What license are they released under?
The loaders are part of the MagicWebBox codebase, an open source project released under the MIT license. You can reuse them, including in commercial projects, as long as you follow the terms of that license.