Looking for a progress bar to visualize the percentage data such as skills/experiences, word progress, and 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 13 2023
Table Of Contents:
Best JavaScript Progress Bars
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. Minimalist Page Load Progress Bar – nanobar
A super tiny JavaScript library to create a custom *FAKE* page load progress bar on the top of the page.
4. Creating Multi-purpose Progress Bars with Javascript and CSS3 – 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. Material Design Inspired Progress Bar with CSS3 and Pure JS – Mprogress.js
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. Colorful Progress Bar Library For Vanilla JavaScript – Qier Progress
A jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.
7. Slim Progress Bar with JavaScript – ep.js
A pure JavaScript/CSS solution that enables you to create various types of progress bars using Html5 progress element and CSS3 animations.
8. Slick Smooth Top Progress Bars – ToProgress.js
A lightweight JavaScript library used to create slim, smooth, CSS3 animated progress bar on the top of your webpage, as you seen on Youtube.
9. Easy Progress Bar Engine With Promise Support – Rsup Progress
A simple, fast, modern progress bar JavaScript library with promise support.
10. Fancy Progress Bars With SVG Patterns – Bars
The Bars library lets you create fancy progress bars filled with SVG patterns when processing.
Bonus: CSS Only Progress Bars
1. 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.
2. Responsive Step Progress Indicator with Pure CSS
A pure css progress indicator that helps you create responsive, fully customizable step wizards or timelines in both directions.
3. Smooth Circle Progress Indicator In SVG And CSS
Yet another pure CSS and SVG solution to create smooth circular progress bars indicating percentages on the web app.
More Resources:
To download more progress bars for your next project, here are a few more resources available online: