Question

I have one HTML5 progress bar with start value of 100. When clicked the button, its value will be reduced to 0 in 15 seconds. I have modified the code from example found in the internet. It is now in the JSFiddle. It’s now showing percent of the progress bar but I want it to show the time left until it finished loading. How can I do that ?

JS

$('#btnUpload').click(function() {
var time = 150; //15 secs
var bar = document.getElementById('progBar'),
    fallback = document.getElementById('downloadProgress'),
    loaded = 100;

var load = function() {
    loaded --;
    bar.value = loaded;

    /* The below will be visible if the progress tag is not supported */
    $(fallback).empty().append("HTML5 progress tag not supported: ");
    $('#progUpdate').empty().append(loaded + "% loaded");

    if (loaded <0) {
        clearInterval(beginLoad);
        $('#progUpdate').empty().append("Upload Complete");
        console.log('Load was performed.');
    }
};

var beginLoad = setInterval(function() {
    load();
}, time);

});

Answer 1

If “It will be exactly finished in 15 secs.” then is it what you wanted?
Just put

var t = time-(time/100)*(100-loaded);
$('#progUpdate').empty().append(Math.round(t/10) + " sec left");

instead

$('#progUpdate').empty().append(loaded + "% loaded");