jQuery asProgress - Animate the progress bar.

asProgress is a jQuery plugin that animate the progress bar.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../css/progress.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery-asProgress.js"></script>

2. HTML

<div class="progress" role="progressbar" data-goal="100" aria-valuemin="0" data-step="2" aria-valuemax="100">
	<div class="progress__meter"><span class="progress__label"></span></div>
</div>

3. JAVASCRIPT

$(".progress").asProgress({
    namespace: 'progress'
});

4. OPTIONS

{
    namespace: 'asProgress',
    min: 0,
    max: 100,
    goal: 100,
    step: 1,
    speed: 50, // refresh speed
    delay: 300,
    label: function(n) {
        var percentage = this.getPercentage(n);
        return percentage;
    },
    onStart: function(){},
    onStop: function(){},
    onUpdate: function(){},
    onReset: function(){}
}

5. METHODS

jquery asProgress has different methods , we can use it as below :

$(".progress").asProgress("start");
$(".progress").asProgress("stop");
$(".progress").asProgress("done");
$(".progress").asProgress("go", 50);
$(".progress").asProgress("go", '50%');
$(".progress").asProgress("reset");

6. EVENTS

• asProgress::start
• asProgress::stop
• asProgress::done
• asProgress::update
• asProgress::reset