Top 10 JavaScript & CSS Progress Bar Components (2020 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 Jan 26 2020

1. NProgress

NProgress

Demo Download

NProgress is a tiny Vanilla JavaScript plugin for creating a slim and nanoscopic progress bar that features realistic trickle animations to convince your users that something is happening. Perfect for Turbolinks, Pjax, and other Ajax-heavy apps. Inspired by Google, YouTube, and Medium.


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


3. Minimal Horizontal & Circular Progress Bar Library – ProgressBar.js

Minimal Horizontal & Circular Progress Bar Library – ProgressBar.js

Demo Download

This is a tiny JavaScript library for creating circular and/or top horizontal progress bars animated with the tween.js library.


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


5. Animated Radial Progress Bar In JavaScript – ToxProgress.js

Animated Radial Progress Bar In JavaScript – ToxProgress.js

Demo Download

ToxProgress.js is a lightweight JavaScript library which makes use of plain HTML/CSS to create animated circular (radial) progress bars with several useful customization options.


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


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

FavIconX

Demo Download

FavIconX is a pure JavaScript library that displays an animated, highly customizable progress bar as the favicon on your browser tab.


9. bar-of-progress

Small Top Progress Bar Component In Pure JS - bar-of-progress

Demo Download

bar-of-progress is a pure JavaScript component that displays a progress bar/loading indicator on the top of the page just like Youtube.


10. Circular Progress Bar With Plain HTML / CSS

Circular Progress Bar With Plain HTML CSS

Demo Download

A pure Html and CSS approach to presenting percentage values in partially filled circles just like the ring chart. Powered by CSS3 transform and clip properties.


More Resources:

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

You Might Be Interested In: