aswathy aswathy - 2 months ago 13
CSS Question

How to show minute, second, hour in time progress bar

I have a time progress bar. I use this code. In this time bar, I get the time in seconds, but I want to show minute, second, hour in the time progress bar.



var timer = 0,
timeTotal = 2500,
timeCount = 20,
timeStart = 0,
cFlag;

function updateProgress(percentage) {
var x = (percentage/timeTotal)*100,
y = x.toFixed(3);
$('#pbar_innerdiv').css("width", x + "%");
$('#pbar_innertext').css("left", x + "%").text((percentage / 1000).toFixed(2) + "\00a0s");
}

function animateUpdate() {
var perc = new Date().getTime() - timeStart;
if(perc < timeTotal) {
updateProgress(perc);
timer = setTimeout(animateUpdate, timeCount);
} else {
updateProgress(timeTotal);
}
}

$(document).ready(function() {
$('#pbar_outerdiv').click(function() {
if (cFlag == undefined) {
clearTimeout(timer);
cFlag = true;
timeStart = new Date().getTime();
animateUpdate();
}
else if (!cFlag) {
cFlag = true;
animateUpdate();
}
else {
clearTimeout(timer);
cFlag = false;
}
});
});





jsfiddle.net/McNetic/hnfRe/397

Answer

With percentaje (line 11):

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text(x.toFixed(2) + '%');
}

SEE DEMO

With hours, minutes and seconds:

var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

function updateProgress(percentage) {

    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text( Math.floor(percentage/hours) + 'h ' +  Math.floor(percentage/minutes) + 'm ' +  Math.floor(percentage/seconds) + 's');
}

SEE DEMO.

I think for that you should use requestAnimationFrame:

var timeTotal = 2500,
    timeStart = 0,
    cFlag = false;

var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

function updateProgress() {

    var time = new Date().getTime() - timeStart;
    var x = (time/timeTotal)*100,
        y = x.toFixed(3);
    $('#pbar_innerdiv').css("width", x + "%");
    $('#pbar_innertext').css("left", x + "%").text( Math.floor(time/hours) + 'h ' +  Math.floor(time/minutes) + 'm ' +  Math.floor(time/seconds) + 's');
    
    if(time <= timeTotal && cFlag) {
        requestAnimationFrame(updateProgress);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').click(function() {
        if (cFlag === false) {
            cFlag = true;
            timeStart = new Date().getTime();
            updateProgress();
        }
        else {
            cFlag = false;
        }
    });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pbar_outerdiv" style="width: 300px; height: 20px; border: 1px solid grey; z-index: 1; position: relative; border-radius: 5px; -moz-border-radius: 5px;">
<div id="pbar_innerdiv" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; height: 100%; color: black; font-weight: bold; text-align: center;">0h 0m 0s</div>
</div>

<p>Click once to start!</p>
<p>Click again to toggle Start/Stop</p>

Comments