CODEWITHSUNDEEP
jqueryhtml
chandru
chandru

Reputation: 1

animation of progress bar using JQuery

I would like to animate the progress bar gradually. When i use for loop, the progress bar disappearing

<script type="text/javascript">
    $(function() {

        // Set the progressbar's initial value to 76%.
        $("#progressbar1").progressbar({value:7});

        // Set the progressbar's value to 18%.
        $("#button1").click(function() {            
            $("#progressbar1").progressbar("option", "value", 18);          
        });

        // Increment the progressbar's current value by 10%.
        $("#button2").click(function() {
            var val = $("#progressbar1").progressbar("option", "value");
        });

        // Decrement the progressbar's current value by 10%.
        $("#button3").click(function() {
            var val = $("#progressbar1").progressbar("option", "value");
            $("#progressbar1").progressbar("option", "value", val-10);
        });
    });
</script>


<input id="button2" type="button" value="Progress" />

So, when i click on Button 2, the progress bar has to animate gradually.

I will be more thank full, if some one help me to load the animation when page opens with onload() function Please help me to animate the progress bar gradually and also it should load automatically when i open the file.

Regards,

Chandru.

Upvotes: 0

Views: 6318

Answers (2)

gor
gor

Reputation: 11658

$('#progressbar').progressbar();

$('#button2').click(function(){
    makeProgress($('#progressbar'), 0, 100, 4);
});

function makeProgress(target, start, stop, steps){
    var step = (stop - start)/steps;
    var increment = function(){
        var val = target.progressbar("value");
        target.progressbar("option", "value", val + step);
        if (val + step < stop) setTimeout(increment, 500);
    };
    increment();
}

Upvotes: 3

cschleiden
cschleiden

Reputation: 171

By far not the best way (actually more a hack) but maybe you could look into the .animate jQuery function. Using a "dummy" css property it could look like this to animate the progressbar from a value of 0 to 100:

$('#progressbar').animate(
{ dummy: '100' }, 
{ 
  step: function(now,fx) { 
    // set current value
    $('#progressbar').progressbar('value', now); 
  } 
});

Edit: Example using one of jQuery's easing functions: http://jsfiddle.net/hPGNE/

Upvotes: 1

Related Questions