35+ jQuery Progress Bars - Free Code + Demos

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

A progress bar that wraps around the outside of the whole window instead of only at the top. Unfortunately this is dependent on jQuery because I could not get the elements to have 0% height/width dependent on scroll speed.

A chaining-animations exercise.

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

A demo of something I developed for a client which shows reading progress while scrolling through a page.

Flat radial progress bar (pie)

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.

Read article here: https://stormix.co/fake-progress-bars-and-maths/

Interactive Progress Bar Developed by Andy Tran | Designed by Tahir Yousaf

Forked from Stéphane Lyver's Pen Mega progress bar.

100dayscss #022 Progress bar Circle SVG Animation, delay, ultraviolet design, text appearing script from @

A circular progress bar created with canvas and animated with Greensock Animation Platform JS

Part of Jay's Materialize Collection at: https://codepen.io/collection/nbBqgY

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. Code Modified and Inspired from Jamie Dixon's pen

Animated radial progress bar, which can be customized into concentric multi progress, simple pie chart forms and iconic forms.

This radial progress bar is made with svg. The progress bar animation is animated with the stroke-dasharray attribute. The number animation form 0% to 100% is made with jQuery

Interactive Progress Bar Developed by Andy Tran | Designed by Tahir Yousaf

Nice flat steps procedure with animations in CSS3. jQuery used to assign/revoke classes. Done/tested in Win+Chrome. Forked from Chusquero's Pen Steps process.

Forked from Tufail Shaikh's Pen process progress tabs.

Used in my portfolio circa Summer/Fall 2012 to show my design process. Forked from Dr. Kat's Pen Design Process Wheel.

Got long forms on your website ? Break them up into smaller logical sections and convert it into a multi-step form with a cool progress bar. Could work for lengthy processes like registration, checkout, profile fillups, 2-factor authentication logins, etc. Forked from Daniel Ramos's Pen M...

Read More

3 step sign up form with css3 styles and animations Forked from mweint's Pen Sign Up Form.

A animated step guide (for a checkout or similar) A very simple and compatible animation. Forked from Lasse Rafn's Pen Experimental Step Animation.

Forked from Travis Arnold's Pen SCSS/jQuery Progress Bar.