10 Best Progress Bar (Linear) Components In JavaScript & CSS (2022)

by jQueryScript,

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 linear progress bar components/plugins implemented in jQuery and Vanilla JavaScript. I hope you like it.

See also:

Originally Published Nov 14 2017, updated Jan 08 2022

Table of contents:

jQuery Progress Bar Plugins:

Automatic Page Load & Ajax Request Progress Bar - Pace.js

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

Automatic Page Load & Ajax Request Progress Bar - Pace.js

[Demo] [Download]


Dynamic Multi-step Progress Bar In jQuery - easy-progress

easy-progress is a really small jQuery plugin that dynamically renders a multi-step progress bar with number and counter on the webpage.

Dynamic Multi-step Progress Bar In jQuery - easy-progress

[Demo] [Download]


jQuery Plugin For Bootstrap Loading Modal With Progress Bar - waitingFor

A lightweight jQuery plugin used to display a loading indicator popup using Bootstrap modal and progress bar components.

jQuery Plugin For Bootstrap Loading Modal With Progress Bar - waitingFor

[Demo] [Download]


Easy Animated Progress Bar In jQuery - progress-bar.js

A tiny, customizable, animated progress bar jQuery plugin that smoothly fills the horizontal bar based on the percentage you specify.

Easy Animated Progress Bar In jQuery - progress-bar.js

[Demo] [Download]


Linear Progress Indicator In jQuery - rProgressbar

rProgressbar is a cross-browser, easy-to-use jQuery linear progress indicator which helps you generate an animated, customizable, horizontal bar based on a percentage.

Linear Progress Indicator In jQuery - rProgressbar

[Demo] [Download]


Vanilla JS Progress Bar Libraries:

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]


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.

Customizable Top Loading Progress Bar – topbar

[Demo] [Download]


loading-Bar

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

loading-Bar

Demo Download


CSS Only Progress Bar Libraries:

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.

Responsive Step Progress Indicator with Pure CSS

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

Animated Progress Bar Component With Pure CSS

[Demo] [Download]


More Resources:

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.

See Also: