Simple Animated Progress Bar with jQuery and CSS3 - asProgress

File Size: 211 KB
Views Total: 31746
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Animated Progress Bar with jQuery and CSS3 - asProgress

asProgress is a lightweight jQuery plugin used to render a customizable progress bar with subtle CSS3 transitions in a DIV element.

How to use it:

1. Load the required progress.css in the header.

<link rel="stylesheet" href="css/progress.css">

2. Load the jQuery asProgress plugin's script in the footer.

<script src="//"></script>
<script src="src/jquery-asProgress.js"></script>

3. The Html.

<div class="progress" role="progressbar">
  <div class="progress__meter"></div>

4. Usages.







5. Available options. You can pass the options via either JS object or data-OPTION attributes.

namespace: 'progress',
bootstrap: false,
min: 0,
max: 100,
goal: 100,
speed: 20, // speed of 1/100
easing: 'ease',
labelCallback: function labelCallback(n) {
  var percentage = this.getPercentage(n);

  return percentage + '%';

Change logs:


  • v0.2.4


  • v0.2.1


  • Update jquery-asProgress.js


  • Update jquery-asProgress.js



  • update tirgger func

v1.0.1 (2014-09-04)

  • update.

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.