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

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.