Best jQuery Progress Bar Plugins & Tutorials with Demo

Pietimer : Pie Timing Plugin for jQuery

Pietimer : Pie Timing Plugin for jQuery

Pietimer injects a canvas element into the page which has an ever reducing pie shaped timer. Once the timer is complete a callback function is performed.

jQuery Circle Shaped Progressbars

jQuery Circle Shaped Progressbars

A jQuery Plugin for several Circle Shaped Progressbars.

jQuery Layered Navigation with CSS3

jQuery Layered Navigation with CSS3

Layered navigation allows you to easily implement a new navigation system using the jQuery JavaScript library. It combines the presentation into two sections, you won’t need cutting the images into two, an entire section, and through slides at once. It includes CSS3 animations to show the elements, a side menu to show sections and a progress bar indicates the progress along web site. It allows you to include maps and videos in a fast and easy way.

Smoke : jQuery Plugin for Bootstrap

Smoke : jQuery Plugin for Bootstrap

A jQuery plugin that is designed to work with Bootstrap 3 with lots of helpful functionality including form validation, notifications, progress bar and more.

jQMeter : jQuery Animated Horizontal or Vertical Progress Meter

jQMeter : jQuery Animated Horizontal or Vertical Progress Meter

jQMeter is a simple, light-weight jQuery plugin that allows you to display an animated horizontal or vertical progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.

It has a simple design out-of-the-box, but this is on purpose so that you can customize the look to match your needs. You can pass several formatting options including width, height, background bar color, bar color, etc. You can also choose to display the percentage completed or not, as well as control the animation speed.

ProgressBar.js : Beautiful and Responsive Progress bars

ProgressBar.js : Beautiful and Responsive Progress bars

Beautiful and responsive progress bars with animated SVG paths.ProgressBar.js uses shifty tweening library to animate path drawing. So in other words, animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers.

JavaScript Progress Indicator on Page Scroll

JavaScript Progress Indicator on Page Scroll

Page Scroll reading progress indicator with javascript.

jQuery Progress Timer for Bootstrap

jQuery Progress Timer for Bootstrap

jQuery Progress timer is a jquery extension that extends the functionality of the Bootstrap progress bar.

jQuery Circle Animated Progress Bars

jQuery Circle Animated Progress Bars

jQuery Plugin to draw animated circular progress bars.

oLoader : jQuery plugin for nice loading overlays

oLoader : jQuery plugin for nice loading overlays

jQuery ownage loader is a plugin for nice loading overlays. This plugin also contains ownage PageLoader extension to create page preloading overlays.