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
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
A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.
3. 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.
4. Progress.JS
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 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
Enhance your HTML5 progress bars with minimal effort
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. Rsup Progress
A simple, fast, modern progress bar JavaScript library with promise support.
9. Qier Progress
An easy, dependency-free JavaScript library that helps create slim, beautiful, and colorful progress bars to visualize loading status.
10. loading-Bar
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: