Collection of free jQuery progress bar code examples from Codepen, Github and other resources. Update of March 2021 collection. 3 new items.
Related Articles:
- CSS Progress Bars
- Bootstrap Progress Bars
- JavaScript Progress Bars
- React Progress Bars
- Tailwind Progress Bars
- Vue Progress Bars
Links
Made with
- HTML / CSS / JS
About a code
Custom Progress Bar CSS3 & jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS / JS
About a code
Custom Progress Bar CSS3 & jQuery
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS / JS
About a code
Bee Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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
Links
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: -
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Progress Checkmark
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
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
Links
Made with
- HTML / CSS (SCSS) / JS
About a code
Circle Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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
Links
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: -
Links
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
Links
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
Links
Made with
- HTML / CSS (Less) / JS
About a code
Circular Progress Bar
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: jquery.js
Links
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