Collection of free jQuery progress bar code examples from Codepen, Github and other resources. Update of March 2021 collection. 3 new items.

Related Articles:

  1. CSS Progress Bars
  2. Bootstrap Progress Bars
  3. JavaScript Progress Bars
  4. React Progress Bars
  5. Tailwind Progress Bars
  6. Vue Progress Bars

Author

  • Okba Design

Made with

  • HTML / CSS / JS

About a code

Custom Progress Bar CSS3 & jQuery

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

Responsive: yes

Dependencies: -

Author

  • Eric Porter

Made with

  • HTML / CSS (SCSS) / JS

About a code

Scroll Progress Bar

Horizontal & vertical versions.

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

Responsive: yes

Dependencies: -

Author

  • Lena Stanley

Made with

  • HTML / CSS / JS

About a code

Bee Progress Bar

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

Responsive: yes

Dependencies: -

Author

  • davgit

Made with

  • HTML / CSS / JS

About a code

Back to Top with Progress Indicator

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

Responsive: yes

Dependencies: unicons.css

Author

  • YanDevDz

Made with

  • HTML / CSS / JS

About a code

ProBar

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

Dependencies: -

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

  • Sabine Robart

Made with

  • HTML / CSS (SCSS) / JS

About a code

Circle Progress Bar

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

Responsive: no

Dependencies: -

Author

  • Tigran

Made with

  • HTML / CSS / JS

About a code

Circle Progress

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

Dependencies: -

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

  • Oliver Turner

Made with

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

About a code

Responsive Progress Reloaded

This mobile-first version has minimal JavaScript thanks to nth-child trickery.

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

Responsive: yes

Dependencies: -

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