Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

89
Views
Would like to make my progressbar as smooth as possible

Can anyone help me make this progessbar smoother?

This is my javascript code for the progressbar. I hope you can do something with it and help me with it. I would like to improve the smoothness because it is very stuttering at a higher runtime.

        window.addEventListener('message', (event) => {             
            var item = event.data;

            if (item !== undefined && item.type === "ui") {                     
                if (item.display === true) {
                    $(".container").fadeIn(700);
        
                    var start = new Date();
                    
                    var title = item.title;
                    var maxTime = item.time;
                    var text = item.text;
                    var timeoutVal = Math.floor(maxTime/100);
                    animateUpdate();
                    $('#notifyMsg').text(text);
                    $('#notifyHead').text(title);
        
        
                    function updateProgress(percentage) {
                        $('#progb').css("width", percentage + "%");
                    }
        
                    function animateUpdate() {
                        var now = new Date();
                        var timeDiff = now.getTime() - start.getTime();
                        var perc = Math.round((timeDiff/maxTime)*100);
                        if (perc <= 100) {
                            updateProgress(perc);
                            setTimeout(animateUpdate, timeoutVal);
                        } else {
                            $(".container").fadeOut(700);
                        }
                    }


                } else {
                    $("#container").hide();
                }
            }
        });
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You should use window.requestAnimationFrame instead of setTimeout. This function runs on every animation cycle.

And adjust your animateUpdate function.

function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);
    if (perc <= 100) {
        updateProgress(perc);
        // Changed this line
        window.requestAnimationFrame(animateUpdate)
    } else {
        $(".container").fadeOut(700);
    }
}

Here are the docs of window.requestAnimationFrame.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!