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="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/jquery-asProgress.js"></script>

3. The Html.

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

4. Usages.

$('.progress').asProgress('start');

$('.progress').asProgress('done');

$('.progress').asProgress('go',50);

$('.progress').asProgress('go','50%');

$('.progress').asProgress('stop');

$('.progress').asProgress('reset');

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:

2017-09-11

• v0.2.4

2016-09-28

• v0.2.1

2016-08-09

• Update jquery-asProgress.js

2014-11-24

• Update jquery-asProgress.js

2014-09-18

• Update requestAnimationFrame fix

2014-09-06

• 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.