jQuery progress bar code examples and plugins

Custom Progress Bar CSS3 & jQuery

Scroll Progress Bar

Horizontal & vertical versions.

Bee Progress Bar

Back to Top with Progress Indicator

ProBar

This script will allow you to configure a progress bar with a timer with other options.

Progress Checkmark

Cursor With Progress Indicator

Progress indicator for cursor on scroll in jQuery.

Circle Progress Bar

Circle Progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.

Responsive Vertical Progress Steps

Radial Progress Bars

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

Wraparound Progress Bar

A progress bar that wraps around the outside of the whole window instead of only at the top.

Progress Ball

Progress bar in jQuery.

Step Progress Bar

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

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.

Responsive Progress Reloaded

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

Reading Progress Bar

Demo which shows reading progress while scrolling through a page.

Flat Progress Bar

Flat radial progress bar (pie) with little jQuery.

Circular Progress Bar

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.