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 Feb 27 2022
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. 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. 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.
4. 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.
5. Animated Step Progress Bar In Pure JavaScript
An animated, responsive, pure JavaScript progress bar used to indicate the current step / stage you’re currently on. Great for multi-step form wizard.
6. Create Circular Progress Bars Using JavaScript And SVG
A lightweight JavaScript library to help developers to draw animated, cross-browser, highly customizable progress circles using SVG and plain JavaScript.
7. Customizable Top Loading Progress Bar – topbar
A standalone JavaScript plugin to generates a canvas based top progress bar that represents the current loading status of your web page. Ideal for page loader, ajax loader and more.
8. ProgressBar.js
A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.
9. loading-Bar
A JavaScript library for creating highly customizable progress bars to visualize loading status by filling SVG shapes.
10. Liquid Progress Indicator With JavaScript And Canvas – fluid-meter.js
A JavaScript library to create a circular progress indicator with a fluid/water-like effect using Canvas API.
More Resources:
To download more progress bars for your next project, here are a few more resources available online:
