javascript preloader/progress/percentage

Question

I\'m having trouble finding any good information on how to make a javascript(or jquery) progress bar WITH text that tells you the percentage.

I don\'t want a plug in, I

Answer 1

What about using something below:

$('#btnUpload').click(function() {
    var bar = document.getElementById('progBar'),
        fallback = document.getElementById('downloadProgress'),
        loaded = 0;

    var load = function() {
        loaded += 1;
        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 == 100) {
            clearInterval(beginLoad);
            $('#progUpdate').empty().append("Upload Complete");
            console.log('Load was performed.');
        }
    };

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

});

JSFIDDLE

You might also want to try HTML5 progress element:

Progress: 0%


 

http://www.html5tutorial.info/html5-progress.php