Best jQuery Progress Bar Plugins & Tutorials with Demo

Mprogress.js : Progress linear Bar for Material Design

Mprogress.js : Progress linear Bar for Material Design

Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.

ToProgress : Lightweight Top Progress Bar

ToProgress : Lightweight Top Progress Bar

ToProgress is a lightweight, no-dependency top progress bar library.

LoadGo : jQuery Progress Bar with Your Images

LoadGo : jQuery Progress Bar with Your Images

LoadGo is a jQuery plugin that allows you to create a progress bar by using your own images.

  • Perfect for logo image animation when user is waiting for something to be loaded (a website, retrieving information, updating status, etc.)
  • It creates an overlay above your desire DOM element and simulates a loading process using width calculations.

Scrollgress : jQuery Progress Bar for Page Scroll

Scrollgress : jQuery Progress Bar for Page Scroll

A simple, lightweight jQuery plugin used to display a progress bar at the top of the page that fills up as the user scrolls.

Shaded 3D Progress Bars with CSS/Sass

Shaded 3D Progress Bars with CSS/Sass

Today we’d like to show you how to create some pure CSS progress bars with a special 3D look. Consider this tutorial an advanced CSS exercise that will give you insight in a lot of interesting 3D properties and shading techniques. Creating UI components using only CSS will train your ability to think outside of the box and in this tutorial we will show you some tricks on how to create a more complex shape, use it as a progress bar and animate it.

Elastic Progress with SVG & CSS

Elastic Progress with SVG & CSS

An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.

jQuery Progress Tracker

jQuery Progress Tracker

A small (2KB) jQuery plugin that creates a fixed progress indicator based on your content and allows linking between them.

CircularLoader.js : Circular progress bar using HTML5 & jQuery

CircularLoader.js : Circular progress bar using HTML5 & jQuery

CircularLoader.Js is a jQuery plugin made using HTML5 and javascript to create customizable cicular progress bars with or without percentage values. It can be used to create a progress indicator. It is a fully customizable plugin which works with all browsers compatible with HTML5. It is a very easy to integrate and easy to use plugin.

Nanobar.js : Lightweight Progress Bar

Nanobar.js : Lightweight Progress Bar

Very lightweight progress bars (~630 bytes gzipped). No jQuery needed.

Compatibility: iE7+ and the rest of the world

Bar Indicator : jQuery plugin to Visualize Numeric Data

Bar Indicator : jQuery plugin to Visualize Numeric Data

BarIndicator is a jQuery plugin that helps you visualize numeric data (percentage or absolute numbers) in to bars.