10 Best JavaScript & CSS Progress Bar Components (2024 Update)

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 11 2024

Table Of Contents:

Best JavaScript Progress Bars

1. Google Like Slim Progress Bar Plugin – NProgress

A lightweight (~4kb minified and gzipped) and standalone JavaScript library to create beautiful progress indicators for your page load and ajax request.

Google Like Slim Progress Bar Plugin - NProgress

[Demo] [Download]


2. 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.

Animated Step Progress Bar In Pure JavaScript

[Demo] [Download]


3. 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.

Create Circular Progress Bars Using JavaScript And SVG

[Demo] [Download]


4. 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.

Liquid Progress Indicator With JavaScript And Canvas - fluid-meter.js

Demo Download


5. ProgressBar.js

A modern JavaScript library to create animated, smooth, creative progress indicators using SVG.

ProgressBar.js

Demo Download


6. Simple Plain Circle Progress Bar Library – ProgressCircle.js

ProgressCircle.js is a JavaScript library for generating circular progress (loading) bars using plain JavaScript and CSS. No image, SVG, and canvas required.

circle-progress-bar

Demo Download


7. Flexible Progress Bar Using SVG And Plain JavaScript – loading-Bar

A JavaScript library for creating highly customizable progress bars to visualizing loading status by filling SVG shapes.

Flexible Progress Bar Using SVG And Plain JavaScript – loading-Bar

[Demo] [Download]


8. Represent Percentage In A SVG Circle – Circular Progress Bar

Yet another radial progress bar plugin to display a percentage value as an animated SVG circle.

Represent Percentage In A SVG Circle - Circular Progress Bar

[Demo] [Download]


9. Terminal Style Text Progress Bar In JavaScript – Ascii Loader

A pure JavaScript library to create a highly customizable text progress/loading bar as you see in a terminal console.

text-progress-bar-ascii-loader

[Demo] [Download]


10. Animated Progress Steps In Vanilla JavaScript

Make use of JavaScript and CSS to create animated and functional progress steps that can be used in sign-up forms or e-commerce checkouts.

Animated Progress Steps

[Demo] [Download]


Bonus: CSS Only Progress Bars

1. Smooth Circle Progress Indicator In SVG And CSS

Smooth Circle Progress Indicator In SVG And CSS

[Demo] [Download]

Yet another pure CSS and SVG solution to create smooth circular progress bars indicating percentages on the web app.


2. Responsive Step Progress Indicator with Pure CSS

Responsive Step Progress Indicator with Pure CSS

[Demo] [Download]

A pure css progress indicator that helps you create responsive, fully customizable step wizards or timelines in both directions.


3. Animated Circular Progress Bar Using SVG Path Animation

A pure CSS solution to create a slim stylish circular progress bar using SVG Path Animation and CSS3 animations & transforms.

Animated Circular Progress Bar Using SVG Path Animation

[Demo] [Download]


More Resources:

To download more progress bars for your next project, here are a few more resources available online:

You Might Be Interested In: