CODEWITHSUNDEEP
javascripthtmlanimationprogress-bar
Anon Omus
Anon Omus

Reputation: 381

Animate a progress tag with pure Javascript?

What I'm looking to do is basically have the progress bar go from value 1-100 in one second. It doesn't depend on an actual process status.

This is my effort so far, I can't see why it's having no effect.

<progress id="progBar" value="0" max="100"> </progress> 

setInterval(function(){

             var pb = document.getElementById("progBar");

                            if (pb.value < 100){
                   pb.value = pb.value + 1;
                }


                },10);

Any Ideas on how to achieve this?

Upvotes: 0

Views: 651

Answers (1)

Bryan Way
Bryan Way

Reputation: 1931

I'd recommend you use mainly CSS to do this.

div.progress-bar
{
    /* Your style attributes */

    transition: width 1s;
    -ms-transition: width 1s;
    -o-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
}

Then in your javascript, set the width to whatever you want. For example (using jQuery):

$('div.progress-bar').width('100%');

CSS will animate it automatically.

If you wish to support older browsers (i.e. < Internet Explorer 10), then you'll have to do that in JavaScript. I'd recommend jQuery for that since it's handled for you:

$('div.progress-bar').animate({width: "100%"}, 1000);

If you don't care about older browser support, just stick with the CSS way of doing it. jQuery will still use JavaScript for animation even if CSS animation support is available.

Upvotes: 1

Related Questions