Top 50 Best Progress Bar jQuery Plugins Of 2017 (So Far)

by jQueryScript,

The Progress bar jQuery plugin can be used to detect and visualize the current status of page loading, scroll progress, reading progress, and much more. In this blog post you will find the top 50 best jQuery Progress Bar plugins for both desktop and mobile web design. I hope you like it.

Not a jQuery user? View Top 10 JavaScript & CSS Progressbar Components.

Top 50 jQuery Progress Bar Plugins:

Dynamic Circular Progress Bar with jQuery and CSS3

Just another jQuery plugin which uses JavaScript and CSS3 transforms to draw an animated progress (loading) bar representing a given percent value.

https://www.jqueryscript.net/loading/Dynamic-Circular-Progress-Bar-with-jQuery-CSS3.html

[Demo] [Download]

Create Percentage Circles with jQuery and CSS3 - percircle.js

percircle.js is a lightweight jQuery script used to create a pure CSS circle / ring to represent percentage data using CSS3 transforms and a little JavaScript.

https://www.jqueryscript.net/loading/Create-Percentage-Circles-with-jQuery-CSS3-percircle-js.html

[Demo] [Download]

Smooth Circle Chart Plugin with jQuery and CSS3 - Circle Charts

Circle Charts is a lightweight jQuery plugin to draws a CSS3 powered, animated, smooth circular chart/loader/progress bar that shows the data/progress in percentage.

https://www.jqueryscript.net/chart-graph/Smooth-Circle-Chart-Plugin-with-jQuery-CSS3-Circle-Charts.html

[Demo] [Download]

Create Pretty & Animated Donut Charts with jQuery and Chart.js

A jQuery plugin to draw animated, doughnut chart style, circular progress indicators using Html5 canvas and chart.js JavaScript library.

https://www.jqueryscript.net/chart-graph/Create-Pretty-Animated-Donut-Charts-with-jQuery-Chart-js.html

[Demo] [Download]

Circular Pie Chart & Progress Bar Plugin with jQuery and Canvas

A dead simple jQuery plugin that uses HTML5 canvas to render animated, customizable, circular pie chart for representing percentage values or progress status.

https://www.jqueryscript.net/chart-graph/Circular-Pie-Chart-Progress-Bar-Plugin-with-jQuery-Canvas.html

[Demo] [Download]

Customizable Radial Progress Bar Plugin With jQuery

Radial Progress Bar is a lightweight jQuery plugin that uses plain HTML and CSS to draw animated, highly customizable, circular progress bars to visualize your percentage values.

https://www.jqueryscript.net/loading/Customizable-Radial-Progress-Bar-Plugin-With-jQuery.html

[Demo] [Download]

jQuery Plugin For Circular Progress Indicators - Circle Progress

Circle Progress is a customizable jQuery plugin for visualizing your numeric data in an animated circular progress bar.

https://www.jqueryscript.net/loading/jQuery-Plugin-For-Circular-Progress-Indicators-Circle-Progress.html

[Demo] [Download]

Animated Circle / Arc Generator with jQuery and SVG - SVG Arc Creator

SVG Arc Creator is a jQuery plugin for rendering animated, SVG based circles / arcs which can be used as loading spinner or progress indicator.

https://www.jqueryscript.net/loading/Animated-Circle-Arc-Generator-with-jQuery-SVG-SVG-Arc-Creator.html

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

https://www.jqueryscript.net/loading/Animated-Customizable-Progress-Meter-Plugin-For-jQuery-jQMeter.html

[Demo] [Download]

Smooth Circular Progress Bar with jQuery and Raphaël.js

circleProgressBar.js is a lightweight jQuery plugin used to create smooth, cross-browser circular progress bar / loading bar using Raphaël.js.

https://www.jqueryscript.net/loading/Smooth-Circular-Progress-Bar-with-jQuery-Raphael-js.html

[Demo] [Download]

jQuery Circular Progress Bar With Text Counter

Just another jQuery & HTML5 canvas based circular progress bar which visualizes the percent value in an animated circle with a custom counter.

https://www.jqueryscript.net/loading/jQuery-Circular-Progress-Bar-With-Text-Counter.html

[Demo] [Download]

Animated Circular Progress Indicator Plugin With jQuery And Canvas

Grasp Mobile Progress Circle is a jQuery plugin used for generating a circular, customizable, smoothly animated and canvas based progress bar to indicate the loading status.

https://www.jqueryscript.net/loading/Animated-Circular-Progress-Indicator-Plugin-With-jQuery-Canvas.html

[Demo] [Download]

Minimalist Graphical Progress Indicator with jQuery and Canvas - circleGraphic

circleGraphic is a jQuery plugin that uses HTML5 canvas 2D API to draws an animated, circular progress indicator (gauge meter, dial) to represent percentage values.

https://www.jqueryscript.net/loading/Minimalist-Graphical-Progress-Indicator-with-jQuery-Canvas-circleGraphic.html

[Demo] [Download]

Dynamic Pie Chart-style Progress Bar with jQuery and SVG - progresspieSVG

progresspieSVG is a simple yet robust jQuery plugin which renders pie or ring chart style progress bars or countdown timers using SVG element.

https://www.jqueryscript.net/chart-graph/Dynamic-Pie-Chart-style-Progress-Bar-with-jQuery-SVG-progresspieSVG.html

[Demo] [Download]

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

https://www.jqueryscript.net/chart-graph/Responsive-Animated-Progress-Bar-With-jQuery-CSS3-Barfiller-js.html

[Demo] [Download]

SVG Based Progress Bar Plugin For jQuery - Progress.js

Progress.js is a really simple jQuery plugin which draws an animated and fully customizable progress bar inside a SVG element.

https://www.jqueryscript.net/loading/SVG-Based-Progress-Bar-Plugin-For-jQuery-Progress-js.html

[Demo] [Download]

Animated Step Progress Indicator With jQuery - StepProgressBar

StepProgressBar is a lightweight jQuery plugin for rendering an animated, responsive, flexible progress bar with multiple steps on the webpage.

https://www.jqueryscript.net/other/Animated-Step-Progress-Indicator-With-jQuery-StepProgressBar.html

[Demo] [Download]

Simple Plain Bar Chart Plugin With jQuery - barCharts

barCharts is a very small jQuery plugin used to render an animated, horizontal or vertical bar chart / progress bar using plain HTML and CSS.

https://www.jqueryscript.net/chart-graph/Simple-Plain-Bar-Chart-Plugin-With-jQuery-barCharts.html

[Demo] [Download]

Minimalist Text Loading Progress Indicator Plugin - txtProgress

A super tiny jQuery text progress bar plugin that visualizes the loading progress by altering the filling color of characters of your text.

https://www.jqueryscript.net/loading/Minimalist-Text-Loading-Progress-Indicator-Plugin-txtProgress.html

[Demo] [Download]

jQuery Plugin For Bootstrap Loading Modal With Progress Bar - waitingFor

waitingFor is a lightweight jQuery plugin used to display a loading indicator popup using Bootstrap modal and progress bar components.

https://www.jqueryscript.net/loading/jQuery-Plugin-For-Bootstrap-Loading-Modal-With-Progress-Bar-waitingFor.html

[Demo] [Download]

Custom Viewport Based jQuery Progress Bar Plugin - Sonny ProgressBar

Progressbar.js is a jQuery plugin for creating custom and CSS3 animated progress bars that are auto triggered as they come into view.

https://www.jqueryscript.net/loading/Custom-Viewport-Based-jQuery-Progress-Bar-Plugin-Progressbar-js.html

[Demo] [Download]

Responsive jQuery Progress Bar With Steps - Progressbar.js

Progressbar.js is a very small jQuery plugin that helps you render a responsive progress bar with custom dynamic steps for multi-step sign up forms.

https://www.jqueryscript.net/form/Responsive-Progress-Bar-With-Steps.html

[Demo] [Download]

Circular Image Progress Bar Plugin With jQuery - imgProgress

imgProgress is a tiny yet customizable jQuery plugin for drawing SVG based circular progress bar / right chart with custom images to present the percentage values.

https://www.jqueryscript.net/loading/Circular-Image-Progress-Bar-Plugin-With-jQuery-imgProgress.html

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

https://www.jqueryscript.net/chart-graph/jQuery-Progress-Bar-Plugin-LineProgressbar.html

[Demo] [Download]

jQuery Plugin To Display A Reading Progress Indicator On Scroll

A jQuery plugin that creates a reading indicator for your long webpage to indicate the scroll progress and the current content section you're viewing.

https://www.jqueryscript.net/other/jQuery-Plugin-To-Display-A-Reading-Progress-Indicator-On-Scroll.html

[Demo] [Download]

Animated Circular Loader Plugin with jQuery and Canvas - CircletPreloader

CircletPreloader is a jQuery plugin that utilizes canvas 2D drawing API to draw an animated, circular progress indicator for representing percentage value in an elegant way.

https://www.jqueryscript.net/loading/Animated-Circular-Loader-Plugin-with-jQuery-and-Canvas-CircletPreloader.html

[Demo] [Download]

jQuery Plugin To Manipulate Bootstrap Progress Bars

A jQuery & Bootstrap plugin used to dynamically generates easy-to-manipulate Bootstrap progress bars on the webpage.

https://www.jqueryscript.net/loading/jQuery-Plugin-To-Manipulate-Bootstrap-Progress-Bars.html

[Demo] [Download]

Animated SVG Progress Bar For jQuery/JavaScript/Angular

This is a simple, animated, SVG based circular progress bar component which can be implemented in jQuery, JavaScript and AngularJS.

https://www.jqueryscript.net/loading/SVG-Progress-Bar-For-jQuery-JavaScript-Angular.html

[Demo] [Download]

Basic jQuery Circular Progress Bar Plugin - Circles

Circles is a jQuery plugin which allows to visualize numeric data (percentage or absolute numbers) in an animated circular progress bar.

https://www.jqueryscript.net/loading/Basic-jQuery-Circular-Progress-Bar-Plugin-Circles.html

[Demo] [Download]

jQuery Plugin To Create Canvas Based Graphical Ratings - Rate

Rate is a super tiny jQuery rating plugin which dynamically draws box- and ring chart-style graphical ratings using JavaScript, HTML5 canvas and CSS/CSS3.

https://www.jqueryscript.net/chart-graph/jQuery-Plugin-To-Create-Canvas-Based-Graphical-Ratings-Rate.html

[Demo] [Download]

Minimal Animated Progress Bar Plugin With jQuery - pBar

pBar is a really simple jQuery progress bar plugin which helps you visualize numeric data (percentage) into animated, inline bars.

https://www.jqueryscript.net/loading/Minimal-Animated-Progress-Bar-Plugin-With-jQuery-pBar.html

[Demo] [Download]

jQuery Plugin To Create Animated Gradient Progress Bars

A lightweight and simple-to-use jQuery plugin which lets you generate animated, canvas based progress bars with custom gradient fills.

https://www.jqueryscript.net/loading/jQuery-Plugin-To-Create-Animated-Gradient-Progress-Bars.html

[Demo] [Download]

Canvas Based Hexagon Progress Bar Plugin with jQuery - Hexagon Progress

Hexagon Progress is a lightweight and customizable jQuery plugin for creating animated hexagon progress bars using Canvas 2D API.

https://www.jqueryscript.net/loading/Canvas-Based-Hexagon-Progress-Bar-Plugin-with-jQuery-Hexagon-Progress.html

[Demo] [Download]

Minimal Horizontal Progress Indicator Plugin with jQuery - jProgress

jProgress is an ultra-light jQuery plugin for presenting your percentage data in animated, horizontal and customizable progress bars.

https://www.jqueryscript.net/loading/Minimal-Horizontal-Progress-Indicator-Plugin-with-jQuery-jProgress.html

[Demo] [Download]

Circular Progress Bar And Countdown Timer With jQuery - circlebars

The jQuery Circle Bars plugin makes it easier to draw animated, customizable, circular progress bars and/or countdown timers using pure CSS/CSS3.

https://www.jqueryscript.net/loading/Progress-Bar-Countdown-Timer-jQuery-circlebars.html

[Demo] [Download]

Responsive Scroll Position Indicator Plugin With jQuery - scroll.js

scroll.js is a really simple jQuery plugin that creates a progress bar to indicate the user's current scroll position on your website.

https://www.jqueryscript.net/other/Responsive-Scroll-Position-Indicator-Plugin-With-jQuery-scroll-js.html

[Demo] [Download]

jQuery Plugin For Animated Scroll Progress Bar - scrollProgress.js

Just another jQuery plugin for generating a top progress bar that auto fills up as the user scrolls to indicate the current scroll / reading position.

https://www.jqueryscript.net/other/jQuery-Plugin-For-Animated-Scroll-Progress-Bar-scrollProgress-js.html

[Demo] [Download]

jQuery Plugin For Page Scroll Progress Bar

A super tiny jQuery plugin for creating a fixed progress bar to indicate the page scroll progress based on your content.

https://www.jqueryscript.net/other/jQuery-Plugin-For-Page-Scroll-Progress-Bar.html

[Demo] [Download]

Customizable Page Scroll Progress Indicator Plugin For jQuery

The jQuery Advanced Scroll Progress Tracker plugin automatically generates a fixed scroll progress indicator from heading elements and allows linking between them.

https://www.jqueryscript.net/other/Customizable-Page-Scroll-Progress-Indicator-Plugin-For-jQuery.html

[Demo] [Download]

Circular Corner Loader with jQuery and CSS3 - jmyloader

jmyloader is a jQuery plugin that creates a circular content loader at the top right of the screen to indicate the loading progress.

https://www.jqueryscript.net/loading/Circular-Corner-Loader-with-jQuery-CSS3-jmyloader.html

[Demo] [Download]

Circular Scroll Progress Indicator with jQuery and CSS3 - progressScroll

A tiny jQuery plugin to create a CSS3 powered circular scroll progress indicator that auto updates based on the current vertical scroll position of the page.

https://www.jqueryscript.net/other/Circular-Scroll-Progress-Indicator-with-jQuery-CSS3-progressScroll.html

[Demo] [Download]

Animated Star Wars Progress Meter Plugin with jQuery - progressBarWars

jQuery progressBarWars is a simple (Star Wars Tribute), lightweight jQuery plugin that allows you to create animated horizontal progress meters.

https://www.jqueryscript.net/loading/Animated-Star-Wars-Progress-Meter-Plugin-with-jQuery-progressBarWars.html

[Demo] [Download]

Medium-style Progressive Image Loading Effect In jQuery - lqip.js

lqip.js is a super tiny jQuery plugin used to progressively load large images with a blur effect to improve the page load time. Similar to the Medium.com's image loading effect.

https://www.jqueryscript.net/loading/Medium-style-Progressive-Image-Loading-Effect-In-jQuery-lqip-js.html

[Demo] [Download]

Reading & Scrolling Progress Indicator with jQuery - Scroll Indicator

Scroll Indicator is a super tiny jQuery plugin for creating a slim, responsive reading progress bar that increases with the scroll of the container.

https://www.jqueryscript.net/other/Reading-Scrolling-Progress-Indicator-with-jQuery-Scroll-Indicator.html

[Demo] [Download]

Progress Bar Style Date Range Indicator Plugin with jQuery - daterangeBar

daterangeBar is a minimal jQuery plugin that visualizes date range into an easy-to-style progress bar, for example: today (Jan. 11) is 33% of January.

https://www.jqueryscript.net/time-clock/Progress-Bar-Style-Date-Range-Indicator-Plugin-with-jQuery-daterangeBar.html

[Demo] [Download]

AJAX Page Loader Plugin With jQuery - timed-page-loader.js

The timed-page-loader.js jQuery plugin helps you create a horizontal/vertical loading bar that indicates the remaining time when you document automatically loads the next page via AJAX requests.

https://www.jqueryscript.net/loading/AJAX-Page-Loader-Plugin-jQuery.html

[Demo] [Download]

SVG Based Circular Progress Bar Plugin For jQuery

A lightweight and easy-to-use jQuery plugin used to draw an animated, fully customizable & styleable, circular progress bar using SVG element.

https://www.jqueryscript.net/loading/SVG-Based-Circular-Progress-Bar-Plugin-For-jQuery.html

[Demo] [Download]

jQuery Plugin To Show Window Scroll In Percentage - progressIndicator

progressIndicator is a jQuery plugin that creates a customizable, animated top (or bottom) progress bar showing the current window scroll depth in percentage.

https://www.jqueryscript.net/other/jQuery-Plugin-To-Show-Window-Scroll-In-Percentage-progressIndicator.html

[Demo] [Download]

Highly Customizable SVG Progress Indicator For jQuery - svg-progress.js

svg-progress.js is a lightweight yet highly customizable jQuery plugin that helps you render an animated, SVG based progress indicator in any shapes.

https://www.jqueryscript.net/loading/Highly-Customizable-SVG-Progress-Indicator-jQuery-svg-progress-js.html

[Demo] [Download]

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.

https://www.jqueryscript.net/other/Top-Scroll-Progress-Indicator-Plugin-With-jQuery-Scrollgress.html

[Demo] [Download]