10 Free CSS & JavaScript Snippets for Creating Animated Loaders

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

Nicolas Slatiner created this incredible loading bar with a top tab displaying the loading percentage. It moves along with a custom animation that can be changed using JavaScript.

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

Perhaps the most complex loading feature I’ve ever seen is this circle created by Glen Cheney. It does use a few lines of JavaScript to add a show/hide feature but this isn’t required for the circle animation to work.

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

This striped fractal canvas loading icon feels like an old-school Windows screensavers. This technique uses a lot of JavaScript to make the looping effect and to keep the color transition consistent.

Even though it’s called a canvas element it does not use a canvas element on the page. Instead it’s powered by Sketch.js which is a natural canvas library. Awesome design if you like the fractal style and don’t mind toying with JavaScript to get it running on your site.

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.

The animation is controlled through JavaScript and WebGL rendering. 3D design is much more prominent on the web these days and this code snippet is proof of how much you can accomplish.

8. Organic Circle

This crazy canvas circle loader reminds me of air traffic radars or the types of blips you’ll see on submarines. It’s built entire on the HTML canvas element using ctx and JavaScript calls to create this effect from scratch.

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

Short, sweet, and to the point best describes this canvas loader. It rotates the inner circle of a canvas element infinitely with some basic JavaScript controlling the animation.

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.

You can fit this onto any page and it’s simple to setup. The dot shapes and animations run through CSS and there’s no JavaScript required.

Wrapping Up

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.

Next up, you could take a look at these code snippets for creating beautiful CSS buttons or this collection of copy and paste responsive navigation snippets.