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 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
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
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
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
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 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 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 is a pure JavaScript library that displays an animated, highly customizable progress bar as the favicon on your browser tab.
9. bar-of-progress
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
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:
