Question

55

How to change progress bar in loop?

rated 0 times [ 61] [ 6] / answers: 1 / hits: 30137 / 12 Years ago, fri, february 8, 2013, 12:00:00

I have html code. And i need some javascript code for update value on every iteration

<progress id=progressBar max=100 value=0></progress>





for (i = 0; i <= 100; i ++) {

    //update progress bar

}

I try to do something like this:

var progressBar = document.getElementById(progressBar);

progressBar.value += i;

But this not work. It update progress bar when loop finish.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

havenbilliec questions

1 Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Thu, Mar 3, 22, 00:00, 2 Years ago

1 React Big Calendar - Is it possible to click on a day and retrieve a list of events on that day?

Fri, Feb 11, 22, 00:00, 2 Years ago

1 Warning: A component is changing a controlled input to be uncontrolled in React js

Fri, May 7, 21, 00:00, 3 Years ago

1 Error: Cannot find module nuxt.js, why my app don't start?

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Redirecting to another html page after successful login attempt

Wed, Nov 25, 20, 00:00, 4 Years ago

View All

answered 12 Years ago leighm · Accepted Answer

I would do it like that for a dummy progressbar :

Html

<div id=progress>

    <span class=progress-text></span>

    <div class=progress-bar></div>

</div>

Css

#progress {

    position:relative;

    width:250px;

    height:20px;

    border:1px solid red;

}



#progress .progress-bar {

    background:blue;

    height:20px;

    width:0%;

    display:inline-block;

}



#progress .progress-text {

    position:absolute;

    z-index:2;

    right:0;

}

JQuery

$(document).ready(function() {

    var progression = 0,

    progress = setInterval(function() 

    {

        $('#progress .progress-text').text(progression + '%');

        $('#progress .progress-bar').css({'width':progression+'%'});

        if(progression == 100) {

            clearInterval(progress);

            alert('done');

        } else

            progression += 10;



    }, 1000);

});

jsFiddle

You could use the JQueryUI Progressbar too !