10 Best Progress Bar (Linear) Components In JavaScript & CSS (2021)
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.
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.
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.
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.
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. .
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.
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.
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.
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.
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.
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:
- 10 Best Circular/Radial Progress Bar JavaScript Plugins
- 10 Best Progress Bar Components For Vue.js App
- 10 Best JavaScript & CSS Progress Bar Components (2020 Update)