Collection of free jQuery progress bar examples.

12 jQuery Progress Bars

Collection of free jQuery progress bar code examples.

Related Articles:

  1. CSS Progress Bars

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS) / JS

About a code

Progress Checkmark

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

Responsive: no

Dependencies: jquery.js

Author

  • Ivan Grozdic

Made with

  • HTML / CSS / JS

About a code

Cursor With Progress Indicator

Progress indicator for cursor on scroll in jQuery.

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

Responsive: no

Dependencies: bootstrap.css, jquery.js

Author

  • Damian Drygiel

Made with

  • HTML / CSS (SCSS) / JS (TypeScript)

About a code

Responsive Vertical Progress Steps

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

Responsive: yes

Dependencies: jquery.js

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS / JS

About a code

Radial Progress Bars

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

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Wraparound Progress Bar

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

Made with

  • HTML (Pug) / CSS (SCSS) / JS

About a code

Progress Ball

Progress bar in jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Grant Vinson

Made with

  • HTML / CSS (SCSS) / JS

About a code

Step Progress Bar

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

Made with

  • HTML / CSS (Stylus) / JS

About a code

Progress Bar Liquid Bubble

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

Responsive: no

Dependencies: jquery.js

Author

  • Ed Hicks

Made with

  • HTML / CSS (SCSS) / JS

About a code

Reading Progress Bar

Demo which shows reading progress while scrolling through a page.

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

Responsive: yes

Dependencies: jquery.js

Demo image: Flat Progress Bar

Author

  • Shankar Cabus

Made with

  • HTML / CSS (SCSS) / JS

About a code

Flat Progress Bar

Flat radial progress bar (pie) with little jQuery.

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

Responsive: no

Dependencies: jquery.js

Author

  • Cliff Pyles

Made with

  • HTML / CSS (Less) / JS

About a code

Circular Progress Bar

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

Responsive: no

Dependencies: jquery.js

Author

  • Stephen Fairbanks

Made with

  • HTML / CSS (SCSS) / JS

About a code

Super Simple Progress Bar

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

back to top