Progress bars seem in uploads, background requests, multi-step varieties, and web page transitions when an online app wants to indicate that work is underway. The native HTML <progress> aspect handles easy percentages, however JavaScript libraries are helpful when the bar should react to AJAX exercise, software state, step modifications, or customized animation.
Listed here are 10 linear progress bar parts for jQuery, vanilla JavaScript, and TypeScript tasks. They lengthen the fundamental share meter with application-driven conduct, and each entry features a demo and obtain hyperlink.
Initially Revealed Nov 14 2017, updated Oct 06 2026
Fast Comparability
Greatest jQuery Progress Bar Plugins
Animated Gradient Progress Bar With Counter
A compact jQuery plugin for determinate progress. It animates a horizontal fill and retains a share counter in sync with the bar.
Multicolor Progress Bar Plugin – jQuery Multibar.js
Multibar.js divides a horizontal bar into coloured segments and locations markers at outlined values. It additionally generates legends for the configured ranges.
Dynamic Multi-step Progress Bar In jQuery – easy-progress
easy-progress builds a numbered step bar for checkout flows, wizards, and different staged duties. The plugin controls the step depend, energetic place, and bar width.
Customizable Progressbars That Fill Up When Seen – Absolute
Absolute reads share values from knowledge attributes and animates every bar when it enters the viewport. Titles, tooltips, RTL format, easing, and length are configurable.
- Share values from
data-value. - Elective titles and animated tooltips.
- RTL format.
- Customized easing and animation length.
Linear Progress Indicator In jQuery – rProgressbar
rProgressbar renders an animated horizontal share bar with configurable colours, radius, dimensions, counter show, and length. An optionally available Waypoints integration begins the animation when the bar enters the viewport.
Greatest JavaScript & TypeScript Progress Bar Libraries
Computerized Web page Load & Ajax Request Progress Bar – Tempo.js
Tempo estimates page-load progress from AJAX requests, doc prepared state, event-loop lag, and chosen parts. It will possibly restart for AJAX navigation and pushState modifications.
Animated Step Progress Bar In Pure JavaScript
This dependency-free part creates labeled checkpoints for multi-step varieties and staged flows. Initialization accepts the step labels, energetic step, container ID, and animation timing.
Animated Progress Indicator With JavaScript And SVG Paths – ProgressBar.js
ProgressBar.js makes use of SVG for animated line progress indicators. Its Line API handles programmatic values, animation timing, textual content labels, easing, and teardown.
Google Like Slim Progress Bar Plugin – NProgress
NProgress creates a slim loading bar on the high of a web page. Its API exposes begin(), completed(), set(), and inc(), plus configurable trickle conduct and animation timing.
Trendy TypeScript Progress Bar Library – BProgress
BProgress is a TypeScript reimplementation of NProgress with a framework-agnostic core. It handles determinate and indeterminate loading states and has packages for React, Subsequent.js, Remix, and Vue.
- TypeScript core package deal.
- React, Subsequent.js, Remix, and Vue packages.
- Determinate and indeterminate progress.
- Promise-based progress dealing with.
- CSS customized properties for styling.
When Native HTML <progress> Is Sufficient
For a easy recognized share, the native <progress> aspect is commonly ample. Set worth and max for determinate progress; omit worth when the length is unknown.
<label for="upload-progress">Add progress</label> <progress id="upload-progress" worth="70" max="100">70%</progress>
