jQuery Script Blog

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

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 13 2026

Table of contents:

jQuery Progress Bar Plugins:

Animated Gradient Progress Bar With Counter

A super tiny and pretty nice progress bar jQuery plugin that displays a percentage value as an animated linear bar with a counter.

Animated Gradient Progress Bar With Counter

[Demo] [Download]

Multicolor Progress Bar Plugin - jQuery Multibar.js

A simple yet fully customizable jQuery plugin for creating multi-colored (segmented) progress bars to represent various data ranges, completion levels, or any other metric that requires visualization.

It supports one or more markers that clearly indicate specific points or milestones within the progress bar. In addition, this plugin allows you to generate legends based on the progress value, enabling users to interpret the data being presented easily.

Multicolor Progress Bar Plugin - jQuery Multibar.js

[Demo] [Download]

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

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]

Customizable Progressbars That Fill Up When Visible - Absolute

A tiny (~3kb minified) jQuery plugin for creating highly customizable linear progress bars that fill up when they're scrolled into view.

Features:

  • Auto-generates progressbars based on percentages defined in the data-value attribute.
  • All customization options can be passed via HTML data attributes.
  • With or without progress bar title.
  • Supports RTL (Right To Left).
  • Custom easing functions and animation speed.
  • Beautiful & animated tooltips.

Customizable Progressbars That Fill Up When Visible - Absolute

[Demo] [Download]

Linear Progress Indicator In jQuery - rProgressbar

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

Built with plain JavaScript, HTML, and CSS. No canvas and SVG required. Also can be used as a bar chart to represent your skills, experiences, work progress, etc.

Linear Progress Indicator In jQuery - rProgressbar

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

It automatically monitors AJAX requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again.

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

[Demo] [Download]

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]

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.

Terminal Style Text Progress Bar In JavaScript – Ascii Loader

[Demo] [Download]

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]

Modern TypeScript Progress Bar Library – BProgress

a lightweight progress bar library that creates smooth animated loading indicators for web applications.

Features:

  • TypeScript implementation with clean, optimized syntax.
  • CSS custom properties for easy styling without overriding classes.
  • Configurable progress behavior with minimum/maximum values and animation easing.
  • Multiple installation options, including CDN and package managers.
  • Framework-agnostic core with dedicated framework packages (React, Next.js, Vue, and Remix).
  • Indeterminate progress mode for unknown loading durations.
  • Promise integration for automatic progress management.

Modern TypeScript Progress Bar Library

[Demo] [Download]

CSS Only Progress Bar Libraries:

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]

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]

iOS Style Gradient Progress Bar with Pure CSS/CSS3

An animated, gradient, iOS inspired progress bar made with pure CSS and CSS3.

iOS Style Gradient Progress Bar with Pure CSS/CSS3

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