css progress-bar during long javascript computation

Question

Using javascript with jquery and bootstrap, I would like to have nice progress bar during heavy javascript computation. I know exactly the progress state of computation, but CSS is not updating during the computation.

WebWorker is not a solution as I need to work with a model in main thread which I am not able to copy/clone easily to the worker.

Example: Progressbar is updated at the end. I want it to update during the process.

http://jsfiddle.net/K48B2/

html code:

<div class="progress">
    <div id="loading" class="bar progress-bar progress-bar-info" style="width: 0%"></div>
</div>

javascript code:

for (var i = 0; i <= 10; i++) {
    $('#loading').css('width', i * 10 + '%');
    heavycomputation();
};

possible duplicate of Javascript progress bar not updating 'on the fly', but all-at-once once process finished?, also try jsfiddle.net/nNZCE — oleq
– oleq, Commented Aug 5, 2013 at 13:29
Thanks, I tried their solution, but for some unknown reason I could make it with newer jQuery... Your solution works for me. Thanks! — Andrej Mikulik
– Andrej Mikulik, Commented Aug 5, 2013 at 13:56

Andrej Mikulik · Accepted Answer · 2013-08-12 14:30:13Z

1

Oleq presented this solution, which works... jsfiddle.net/nNZCE

function heavycomp(millis, progress) {
    var date = new Date();
    var curDate = null;
    do {
        curDate = new Date();
    }
    while (curDate - date < millis);

    if ( progress > 10 )
        return;

    setTimeout( function() {
        console.log( progress );
        $('#loading').css('width', progress * 10 + '%');
        heavycomp( 200, ++progress );
    }, 200 );
}

heavycomp( 200, 0 );

answered Aug 12, 2013 at 14:30

Andrej Mikulik

5795 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rogério Jesus · Accepted Answer · 2013-08-05 14:01:22Z

0

Is this closer to what you are looking for?

function heavycomp(millis) {
    var date = new Date();
    var curDate = null;
    do {
        curDate = new Date();
    }
    while (curDate - date < millis);
}

$(function() {
    for (var i = 0; i <= 100; i++) {
        setTimeout(function (i) {
           return function() {
                $('#loading').css('width', i + '%');
                $('#value').html(i + '%');
                console.log(i + '%');
                heavycomp(200);               
           }
        }(i),i * 200);  
    }    
});

answered Aug 5, 2013 at 14:01

Rogério Jesus

411 bronze badge

3 Comments

Andrej Mikulik Over a year ago

jsfiddle.net/mQqcK your solution is not working as expected... Something is updating, but not corresponding with console output. After finishing the script the progress-bar updates fast to 100%.

Andrej Mikulik Over a year ago

Solution from Oleg works. How can I close this question if the answer is only in comment?

Rogério Jesus Over a year ago

Indeed @Andrej, I think its because the heavycomp delay is equal to the timeout. I've changed the fiddle and seems to be working. However the solution presented by oleq looks better.

Collectives™ on Stack Overflow

css progress-bar during long javascript computation

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related