10 Best Progress Bar (Linear) Components In JavaScript & CSS (2023)
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.
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.
Minimal jQuery Animated Progress Bar Plugin - goalProgress
A super tiny jQuery plugin to create an animated goal progress bar with prefix/suffix text support.
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.
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.
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.
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.
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.
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.
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.
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)