50 loaders × 34 styles · zero JavaScript · MIT
Loaders worth
waiting for.
Everyday spinners, creative little stories and festival specials, in every with icons style. Each one is a single tiny SVG: drop it in as an image, a tag or a component. Or chain icons into a loader that shows what is happening, from file to cloud to done.
- One file, no code. Works as
<img>, inline, in any framework. - Silky. Transform and opacity only: 60 fps on the compositor.
- Kind. Slows down for reduced motion, never freezes.
Loader Studio
Make it yours, copy one line.
Start from
Sequence icons and loaders, in order
Hand-over
Style
Colour
Palette for the colourful styles
The collection
65 loaders, every style.
Use them anywhere
One line. Any page, any app, any agent.
No build step and no setup: a loader is a URL. When you want colour, speed or a finished state, add the small tag. Frameworks get components, agents get a catalogue they can search.
Questions
Are the loaders free?
Yes. Like every icon on with icons they are free for personal and commercial use under the MIT license. No sign-up, no credit needed.
Do they need JavaScript?
No. Every loader is one SVG file that animates itself with a few lines of CSS inside it, so <img src="…/spinner.svg"> just works. The optional <with-loader> tag adds colour, speed, morph sequences and a finished state.
Will they slow my page down?
They animate only transform and opacity, which the browser runs on the GPU, off the main thread. A line loader is one to three kilobytes.
What about people who prefer less motion?
With reduced motion turned on, every loader slows to a calm pace instead of stopping, because a frozen loader looks like a hang. Each one is announced as "Loading" (or your words) to screen readers.
Can a loader turn into a check mark when the work is done?
Yes: call done() on the <with-loader> element and it blooms into a check (or any icon you name). reset() starts it again.