10 Best Progress Bar Components In jQuery/JavaScript/CSS

What Is Progress Bar?

A Progress bar is a popular UI component which can be used to detect and visualize the current status of file download, file transfer, page load, scroll progress, reading progress, and much more.

The Best Progress Bar Plugin

In this blog post you will find the 10 best progress bar components/plugins implemented in jQuery, Vanilla JavaScript and Pure CSS/CSS3. I hope you like it.

See also:

Originally Published Nov 14 2017, updated June 14 2019

Table of contents:

• jQuery Progress Bar Plugins
• Vanilla JS Progress Bar Libraries
• Pure CSS Progress Bar Components

Automatic Page Load & Ajax Request Progress Bar - 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.

[Demo] [Download]

Simple Animated Progress Bar with jQuery and CSS3 - asProgress

asProgress is a lightweight jQuery plugin used to render a customizable progress bar with subtle CSS3 transitions in a DIV element.

[Demo] [Download]

Responsive Animated Progress Bar With jQuery And CSS3 - Barfiller.js

Barfiller.js is a jQuery plugin which uses CSS3 transitions to fill horizontal bars with percentage values you specify. .

[Demo] [Download]

Google Like jQuery Slim Progress Bar Plugin - NProgress

NProgress is a tiny jQuery plugin for creating a slim and nanoscopic progress bar which features realistic trickle animations to convince your users that something is happening.

[Demo] [Download]

Animated Customizable Progress Meter Plugin For jQuery - jQMeter

jQMeter is a tiny jQuery plugin to show the progress in percentage for a certain item in an animated, CSS styleable progress bar.

[Demo] [Download]

Vanilla JS Progress Bar Libraries:

Material Design Inspired Progress Bar with CSS3 and Pure JS – 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.

[Demo] [Download]

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.

[Demo] [Download]

Slick Smooth Top Progress Bars – 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.

[Demo] [Download]

Pure CSS Progress Bar Components:

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.

[Demo] [Download]

Animated Progress Bar Component With Pure CSS

A CSS only solution that make it easier to render responsive, CSS3 animated, Bootstrap-like progress bars on your webpage.

[Demo] [Download]

Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome progress bars on the web & mobile? Check out the jQuery Progressbar and JavaScript Progressbar sections.