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

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, Vanilla JavaScript and Pure CSS/CSS3. I hope you like it.

See also:

• 10 Best Circular/Radial Progress Bar Plugins

Originally Published Nov 14 2017, updated Feb 06 2020

Table of contents:

• jQuery Progress Bar Plugins
• Vanilla JS Progress Bar Libraries
• Pure CSS Progress Bar Components

jQuery Progress Bar Plugins:

Minimal jQuery Animated Progress Bar Plugin - goalProgress

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

[Demo] [Download]

---

Animated Customizable Progress Meter Plugin For jQuery - jQMeter

jQMeter is a tiny jQuery plugin to show the progress in percentage for a certain item in an animated, CSS styleable progress bar.

[Demo] [Download]

---

Minimal Customizable jQuery Progress Bar Plugin - LineProgressbar

LineProgressbar is a super tiny jQuery plugin that helps you create horizontal, animated, line chart-style progress bars with or without percentage values. It can be used to create progress/skill/experience indicators.

[Demo] [Download]

---

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.

[Demo] [Download]

---

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.

[Demo] [Download]

---

Vanilla JS Progress Bar Libraries:

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.

[Demo] [Download]

---

Pace.js

Pace.js is a lightweight (~4kb minified and gzipped) javascript library to create beautiful progress indicators for your page load and ajax request.

[Demo] [Download]

---

Minimal Horizontal & Circular Progress Bar Library

This is a tiny JavaScript library for creating circular and/or top horizontal progress bars animated with the tween.js library.

[Demo] [Download]

---

Pure CSS Progress Bar Components:

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.

[Demo] [Download]

---

iOS Style Gradient Progress Bar with Pure CSS/CSS3

An animated, gradient, iOS inspired progress bar made with pure CSS and 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.