10 Best JavaScript & CSS Progress Bar Components (2021 Update)

Looking for a progress bar to visualize the percentage data such as skills/experiences, word progress, content loading?

Here is a constantly updated list of the 10 best and top-rated free JavaScript and CSS based progress bar components we found around the web.

I hope you like it and don’t forget to spread the world.

Originally Published Nov 14 2017, updated Mar 02 2021

1. Pace.js

Automatic-Page-Load-Ajax-Request-Progress-Bar-Pace-js

Demo Download

Pace.js is a lightweight (~4kb minified and gzipped) javascript library to create beautiful progress indicators for your page load and ajax request.

It will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation, it will begin again.


2. ProgressBar.js

ProgressBar.js

Demo Download

A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.


3. Lightweight Slim Javascript Progress Bar – nanobar

Lightweight Slim Javascript Progress Bar – nanobar

Demo Download

A super lightweight progress bar built on top of javascript and CSS3 transitions to create a slim indicator for content loading status.


4. Progress.JS

Progress.JS

Demo Download

A JavaScript and CSS3 based progress bar resolution that can apply on any objects on your web page like button, body, textarea, input and more. You can design your own template for progress bar or customize it simply.


5. Mprogress.js

Mprogress.js

Demo Download

Mprogress.js is a JavaScript library to created linear progress indicator that fills from 0% to 100% using CSS3 powered animations. There’re 4 types of linear bar you can use in your project: Determinate, Buffer, Indeterminate and Query Indeterminate & Determinate.


6. Slim Progress Bar

Slim Progress Bar

Demo Download

Enhance your HTML5 progress bars with minimal effort


7. ToProgress.js

ToProgress.js

Demo Download

ToProgress is a lightweight JavaScript library used to create slim, smooth, CSS3 animated progress bar on the top of your webpage, as you seen on Youtube.


8. Rsup Progress

Rsup Progress

Demo Download

A simple, fast, modern progress bar JavaScript library with promise support.


9. Qier Progress

Qier Progress

Demo Download

An easy, dependency-free JavaScript library that helps create slim, beautiful, and colorful progress bars to visualize loading status.


10. loading-Bar

loading-Bar

Demo Download

A JavaScript library for creating highly customizable progress bars to visualizing loading status by filling SVG shapes.


More Resources:

To download more progress bars for your next project, here are a few more resources available online:

You Might Be Interested In: