Collection
Post cover
Created 4 month back

Best 17 jQuery Progress Bars

Collection of free jQuery progress bar code examples.

Step Progress Bar

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

Bee Progress Bar

Author: Lena Stanley

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Progress Ball

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

Post cover

Flat Progress Bar

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

Circle Progress

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

Cursor With Progress Indicator

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

Progress Checkmark

Author: Aaron Iker

Links: demo and code

Made with: HTML / CSS (SCSS) / JS

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

Dependencies: jquery.js

Progress Bar Liquid Bubble

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

Responsive Vertical Progress Steps

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

Wraparound Progress Bar

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

Scroll Progress Bar

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

Reading Progress Bar

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

Circular Progress Bar

Author: Cliff Pyles

Links: demo and code

Made with: HTML / CSS (Less) / JS

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

Dependencies: jquery.js

Radial Progress Bars

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

ProBar

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

Custom Progress Bar CSS3 & jQuery

Author: Okba Design

Links: demo and code

Made with: HTML / CSS / JS

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

Responsive: yes

Super Simple Progress Bar

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

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback