Custom loading bars offer a way for websites to update visitors using strong visuals. Sometimes a static “loading” message isn’t always enough!
And if you want to add a custom loading bar to your website then this collection is sure to have something that’ll suit your needs.
1. Loading Bar with Counter
But the best part is the animated bar design and the clean style. This loading bar would fit on any website and it offers an incredible user experience.
2. Light Loader
If you prefer a simpler loading spinner with a twist, then this light loader might be just what you’re looking for. It uses the starburst shape coupled with pure CSS3 animations to create a loading effect that draws the eye.
You can adjust the animation style and loading time all in CSS which is pretty neat. And the shapes are all created using CSS too so you can adjust the size, speed, and structure of the starburst icon.
3. Multi-Animated Loader
So you can get this thing running on your site in pure CSS3 with options to change the color, size, and speed. My favorite part of this animation is the off-kilter look where the center rotates against the outside.
It offers a really cool effect that just grabs the eye.
4. Canvas Fractal Loader
5. OuroboroCSS Loaders
The OuroboroCSS loaders are a unique creation from developer Geoffrey Crofte. These loaders are powered by pure CSS and they operate on a repeating animation cycle that gives the illusion of disappearing into the shape.
I like this design more for internal loaders rather than a full-page loader. It’s quaint and easy to spot from a distance, but not so powerful as to take up the entire page.
6. Thermometer Loader
This custom thermometer-style loader feels more like an amazing proof of progress rather than a practical element for your website. But creator Hugo Giraudel really pushed the limits of CSS with this loader moving through a number of different colors from bottom to top.
It only has three HTML elements nested inside each other and the colors and animations are all pure CSS which is breaktaking.
7. Three.js Loader
I have to throw this into the collection just because it’s so darn cool. This Three.js loader by Lennart Hase uses the free Three.js 3D library to create a rotating cube on a small surface.
8. Organic Circle
You may not find a great way to work this into your site, but you have to admit this thing is impressive.
9. Simple Circle Rotator
I do think this rotator is simple enough to fit onto any site and it’s pretty easy to customize too. Everything runs through JS code so you won’t even need to copy the CSS at all.
10. Pure CSS Loader Dots
Another simple yet fun example is this pure CSS loader with alternating dots moving in & out of view. It’s one of the coolest loading effects that really gets the point across without being too blatant.
If you’re looking for a custom loader for your website then I guarantee you’ll find something here. These loaders are wildly diverse but they can all work well for different projects.
Take another look at this collection to see what you can find and feel free to customize these snippets for your own use.