CODEWITHSUNDEEP
javascripthtmlprogress-bar
pieterbesje
pieterbesje

Reputation: 69

how can I get my progress bar to last for exactly 20 seconds?

I need my progress bar to last for exactly 20 seconds. when it completes the bar, it still needs to be able to refresh, like it does now. I need to be able to put the exact number of seconds in my code. here's my code:

<div id="pbar_outerdiv">
<div id="pbar_innerdiv"></div>
<!--<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;"></div>-->
</div>

<script>
var timer = 0,
    perc = 0,
    timeTotal = 2500,
    timeCount = 1,
    cFlag;



function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);

            if(y === "100.000")
    window.location.reload(1);
    $('#pbar_innerdiv').css("width", x + "%");
    //$('#pbar_innertext').text(y + "%");
}

function animateUpdate() {
    if(perc < timeTotal) {
        perc++;
        updateProgress(perc);
        timer = setTimeout(animateUpdate, timeCount);
    }
}
$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag == undefined) {
            clearTimeout(timer);
            perc = 0;
            cFlag = true;
            animateUpdate();
        }
        else if (!cFlag) {
            cFlag = true;
            animateUpdate();
        }
        else {
            clearTimeout(timer);
            cFlag = false;
        }
    });
    $( "#pbar_outerdiv" ).trigger( "click" );
        });
</script>

Upvotes: 0

Views: 902

Answers (1)

Shai
Shai

Reputation: 7315

You're using jQuery. Instead of reinventing the wheel, you can do everything you're attempting there with just:

var duration = 20 * 1000; // = 20 seconds

$(document).ready(function() {
    $outer = $("#pbar_outerdiv");

    $outer.click(function() {
        $('#pbar_innerdiv')
            .stop()
            .css({ width: 0 })
            .animate({ width: "100%" }, duration, "linear", function() { window.location.reload(1); });
    })

    $outer.trigger("click");
});

Working demo

Upvotes: 2

Related Questions