Best 17 jQuery Progress Bars

Author: Okba Design

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Author: Eric Porter

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Horizontal & vertical versions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Author: Lena Stanley

Links: demo and code

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Author: YanDevDz

Links: github page

Made with: HTML / CSS / JS

This script will allow you to configure a progress bar with a timer with other options.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Author: Aaron Iker

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author: Ivan Grozdic

Links: demo and code

Made with: HTML / CSS / JS

Progress indicator for cursor on scroll in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css, jquery.js

Author: Tigran

Links: github page

Made with: HTML / CSS / JS

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Author: Damian Drygiel

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (TypeScript)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author: Erin E. Sullivan

Links: demo and code

Made with: HTML / CSS / JS

Scrolling each svg into the window will activate the progress bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author: Thomas Vaeth

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

A progress bar that wraps around the outside of the whole window instead of only at the top.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author: Tadaima

Links: demo and code

Made with: HTML (Pug) / CSS (SCSS) / JS

Progress bar in jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author: Grant Vinson

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

UI Element to keep users informed on where they are in their process.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, jquery.js

Author: June Hanabi

Links: demo and code

Made with: HTML / CSS (Stylus) / JS

A customizable and theme-able progress bar in the shape of a bubble with constantly sloshing water inside of it. This demo features 3 colors, red, orange, and green depending on the percentage and a textbox to smoothly change the value.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author: Ed Hicks

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Demo which shows reading progress while scrolling through a page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js

Author: Shankar Cabus

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

Flat radial progress bar (pie) with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author: Cliff Pyles

Links: demo and code

Made with: HTML / CSS (Less) / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Author: Stephen Fairbanks

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

This progress bar uses the HTML5 custom data-* attribute to allow for quick updating to a progress bar animated by Zepto (or jQuery). The animation is wrapped in a window.resize function to reanimate if the browser size is changed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js