9 Free Progress Bar JavaScript Plugins For Web Designers

1. LineProgressbar

LineProgressbar.js

The jQuery LineProgressbar is a free plugin that’s super thin and lightweight.

It works with any modern progress bar elements and it takes basic options for total fill length, bar color, and height/width(among other features).

Check out the demo page for some examples along with code snippets you can use on your own website.

This is probably the best progress bar plugin for anyone willing to use jQuery. It’s straightforward to work with, and it’ll run in all major browsers.

2. MProgress.js

MProgress.js library

Another simple option I really like is MProgress.js. This is built around Google’s material design style so you may notice it closely resembles some of Google’s loading bars.

It comes with four different types of loading bars with four different animation styles. They’re all visible on the main page so you can see which one might fit your website.

But you’ll also find animated GIFs of these demos on the GitHub repo along with setup instructions.

Super easy and super lightweight. What more could you ask for?

3. ProgressBar.js

ProgressBar.js homepage

We’ve all seen the progress bars that run across the top of a webpage. These are getting much more common and they’re typically used for dynamically-loaded pages.

ProgressBar.js is a free plugin that replicates this feature. But it doesn’t just rely on bars at the top of the page.

You can use this plugin for any custom shape from circles to triangles and custom parallelograms.

If you look on the main page you’ll find links to examples hosted through JSFiddle. There’s plenty to go around and these make an excellent template for adding loaders onto your page.

4. goalProgress

jQuery Goal Progress plugin

The goalProgress plugin is definitely the simplest of the bunch. It’s primarily meant for use in tracking numbers on an input field, but it can be used for any similar progress bar.

You won’t find too much on the homepage other than a basic demo featuring a charity donation bar.

There’s far more info on the GitHub repo showing what this does and how to get it setup.

I’d recommend this more as a simple starting point for very basic progress animations. For anything else check out some of the other plugins here.

5. μProgress

jQuery uProgress plugin

I had never heard of μProgress before researching for this article. Yet it’s clearly one of the best progress bar plugins on the web.

This was developed as a performant progress bar with a focus on custom animations. They all run on the computer’s GPU which frees up tasks for other page elements to render faster.

You can read a lot more about this process and find setup details in the documentation. It’s a really cool project with a full plugin API for adding custom features too.

Right now it’s in version 1.0.1 and likely to stay up-to-date for years to come. If you’d like to give it a shot just visit the main repo and download a copy.

6. nanobar.js

Nanobar.js plugin

If you’re looking for a pure vanilla JavaScript progress plugin then look no further.

With nanobar.js you get a super small JS library built around progress bar animations. The whole thing measures under 700 bytes when gzipped so it’s very small.

Check out the homepage for some examples with bars embedded in the page along with a top loading bar fixed to the full browser width.

It can run on just a single function call which makes this perfect for non-JS coders as well as devs who staunchly oppose using jQuery.

7. progressStep

progressStep plugin

The majority of progress bars fill up a percentage or a number counter.

But progressStep is different. This jQuery plugin lets you develop a breadcrumb progress bar where the user works through different steps in a pre-defined process.

This process might be signing up for a new account on a website or following an ecommerce checkout flow.

Either way this is a great plugin for adding that kind of functionality into your site. It’s totally free to use and has some great documentation on the GitHub repo.

8. CProgress

CProgress library

CProgress is designed solely for circular loading bars.

These are definitely not the norm, especially on websites. But you can find them handy for Ajax-powered widgets that load new elements into the DOM without refreshing the page.

It comes with a few different skins and plenty of optional features like custom speeds and numeric limits. Everything you need to know can be found on the main page or the main repo along with a download link.

9. jQuery Circle Progress

jQuery Circle Progress plugin

Here’s a very similar plugin also built on the jQuery library.

But with the jQuery Circle Progress plugin you get more variety to pick through. There’s more custom themes and more options to work with.

The downside? It can weigh a bit more so it’s not the best solution for every project.

Currently in v1.2.2 this is a stable plugin and well worth using in a production site. Just depends if you need a progress bar designed as a circle!

And no matter what you need I’d guarantee one of these plugins can help save you time and frustration to avoid coding a progress bar from scratch.

10 Free CSS Loading Spinner Snippets For Web Designers & Developers

1. Various CSS Spinners

This brilliant collection of custom CSS spinners comes from developer Iulian Savin.

You’ll find a slew of animation styles in here from rotating circles to animated bars and even a custom Pong-style loader. Seriously, that one is awesome.

These loaders all come as fully usable assets that you can copy/paste right into your own projects.

Just note these spinners also come from this GitHub repo where you can download the source code in full. Usually a bit easier than copy/pasting from CodePen.

2. Eclipse Spinner

Here’s a super unique spinner that mimics a solar eclipse. Or some kind of light show… I’m not exactly sure but I know it looks awesome.

The whole thing relies on very little HTML and it’s cut down even smaller thanks to Haml templating.

You can compile the Haml and Sass code into plain HTML/CSS if that’s easier for you to customize too.

3. Super Simple CSS Spinner

It doesn’t get much simpler than a lit-up circle rotating around & around.

And that’s precisely what you’ll find with this design created by Thomas Mandelid. It’s a super basic code snippet, and the CSS spinner is a true sight to behold.

It’s not one of the most stylish designs in this list, but it does the job.

Keep this in mind if you need a basic spinner that’ll match any website.

4. Beaulti Circle

I’m not exactly sure what the name for Beaulti Circle has to do with anything.

But I am sure that this custom CSS spinner is crazy cool. The animation style is just so fun to look at, and then you realize this was built entirely using CSS and HTML. That’s even more impressive.

The entire circle design is super clean and minimalist. It’ll grab your attention fast making it perfect for as a custom spinning loader.

I do think it’s a little flashy for corporate sites, but if you update the color to a lighter blue and make it a little smaller this thing could work.

5. Pure CSS Spinners

Developer Mark Kahn put together these pure CSS spinners for your enjoyment.

There’s a really fun mix in here alternating between various colors, plus a spinner of all the colors together in a rainbow. They look pretty radical and tech-focused.

If you like the black design on this spinner it can work well for your site. Just make sure you customize the spinner’s color to match your layout.

6. Spinners w/ Font Icons

Here’s a really fun idea merging custom CSS3 animation with free icon fonts.

In this pen you’ll find a bunch of icons from the Icomoon set. But they’re all animated using CSS to create rotating graphics that look like custom spinners.

Basically they are custom spinners. Just with a bit more to them since they operate on font properties in CSS.

Take a look at this and try messing around with the designs. With 15-20 minutes of tinkering, you might like the end result.

7. Olympic Rings

This has to be one of the most creative loaders I’ve seen in a while.

If you take the Olympic rings and merge them into an HTML document with a dash of CSS3 you get this excellent spinner design.

You will find a small amount of JavaScript code, but it does not directly handle the animation. That code handles the delay which is easier to manage via JavaScript. Everything else is just CSS.

Still, you can turn this into a pure CSS solution with just a few alterations. I almost think the Olympic organizers should add this loader onto their website.

8. Pure CSS Android Preload Spinners

Here’s a pretty cool loading spinner set designed after the typical Android loading graphic.

If you’ve ever used Android you’ll recognize many of these loading graphics. They certainly aren’t 100% replicas, but they’re pretty darn close.

And this pen uses nothing but pure CSS making it an excellent choice for any web developer to dive in.

9. Bounce Delay Loader

While this example isn’t technically a spinner, it’s still way too cool to leave out of this list.

Developer Joni Trythall created these bouncing loader balls from scratch with a little bit of CSS and some creative whimsy.

The code itself runs on Haml & SCSS but you can easily compile that down to raw HTML/CSS within CodePen. That might be easier to copy/paste into your page if you aren’t familiar with preprocessing.

10. Rotating Dots

Last but certainly not least is this super fun rotating spinner loader.

It’s made of smaller dots that all go through a cycle rotation. That means it’s designed to slow down at certain points where all the dots align together, then speed up to complete another revolution.

No doubt this spinner will turn heads on your page. It’s also subtle enough that it can blend into any layout with ease.

Developer Ömer Fatih created this snippet with simplicity in mind so you can get it working with only eight lines of HTML and less than 50 lines of CSS.

A fantastic minimalist spinner with a little extra something to hold your attention.