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

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 26 2021

Table of contents:

jQuery Progress Bar Plugins:

Create Countdown Timers Using Bootstrap 4 Progressbar - progressBarTimer

progressBarTimer is a jQuery plugin that lets you create smooth, customizable countdown timers or loading progress bars using Bootstrap 4's progress bar component.

Create Countdown Timers Using Bootstrap 4 Progressbar - progressBarTimer

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


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]


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.

Simple Animated Progress Bar with jQuery and CSS3 - asProgress

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

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

[Demo] [Download]


Vanilla JS Progress Bar Libraries:

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

Pace.js is 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]


NProgress

NProgress is a tiny Vanilla JavaScript plugin for creating a slim and nanoscopic progress bar that features realistic trickle animations to convince your users that something is happening. Perfect for Turbolinks, Pjax, and other Ajax-heavy apps. Inspired by Google, YouTube, and Medium.

NProgress

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

Lightweight Slim Javascript Progress Bar nanobar

Demo Download


Progress.JS

A JavaScript and CSS3 based progress bar resolution that can apply on any objects on your web page like button, body, textarea, input and more. You can design your own template for progress bar or customize it simply.

Progress.JS

Demo Download


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.

Mprogress.js

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: