jQuery Script Blog

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

by jQueryScript,
progress bar

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 05 2023

Table of contents:

jQuery Progress Bar Plugins:

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]

Image Loading Animation Plugin with jQuery and CSS3 - LoadGo

A jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.

Image Loading Animation Plugin with jQuery and CSS3 - LoadGo

[Demo] [Download]

Minimal jQuery Animated Progress Bar Plugin - goalProgress

A super tiny jQuery plugin to create an animated goal progress bar with prefix/suffix text support.

Minimal jQuery Animated Progress Bar Plugin - goalProgress

[Demo] [Download]

Top Scroll Progress Indicator Plugin With jQuery - scrollgress

Just another jQuery scroll progress indicator plugin which keeps track of scroll events and visualizes the scroll depth into a slim progress bar at the top of the webpage.

Top Scroll Progress Indicator Plugin With jQuery - scrollgress

[Demo] [Download]

Create Countdown Timers Using Bootstrap 4 Progressbar - progressBarTimer

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]

Vanilla JS Progress Bar Libraries:

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]

Minimalist Page Load Progress Bar – nanobar

A super tiny JavaScript library to create a custom *FAKE* page load progress bar on the top of the page.

Minimalist Page Load Progress Bar – nanobar

[Demo] [Download]

Creating Multi-purpose Progress Bars with Javascript and CSS3 – 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.

Creating Multi-purpose Progress Bars with Javascript and CSS3 – Progress.JS

[Demo] [Download]

CSS Only Progress Bar Libraries:

Fancy Progress Bars With SVG Patterns – Bars

The Bars library lets you create fancy progress bars filled with SVG patterns when processing.

Fancy Progress Bars With SVG Patterns – Bars

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