9 Free Progress Bar JavaScript Plugins For Web Designers

Progress bars can be used for loading pages, pulling Ajax content, or for handling basic user input tasks like file uploads.

The newer HTML5 progress bars make it super easy to add these features onto any page. But why not restyle them a bit?

With these free plugins you can redesign your progress bars to match any look for any website. Not to mention all the extra features and custom animations you can add to the page.

1. LineProgressbar

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

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

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

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

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

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

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 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

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.

The post 9 Free Progress Bar JavaScript Plugins For Web Designers appeared first on Speckyboy Web Design Magazine.