Looking for a progress bar to visualize the percentage data such as skills/experiences, word progress, and content loading?
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:
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. Minimalist Page Load Progress Bar – nanobar
5. Material Design Inspired Progress Bar with CSS3 and Pure JS – Mprogress.js
A jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.
8. Slick Smooth Top Progress Bars – ToProgress.js
9. Easy Progress Bar Engine With Promise Support – Rsup Progress
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.
To download more progress bars for your next project, here are a few more resources available online: