HTML5 Progress Bar

HTML5 progress bar example with fallback for unsupported browsers.

by Mike Green

HTML

<input type="button" value="Begin Upload" id="btnUpload" />
<div class="clear"></div>
<progress value="0" max="100" id="progBar">
    <span id="downloadProgress">
        <!-- Your fallback goes here -->
    </span>
</progress>
<div id="progUpdate">
    <!-- Success Message -->
</div>

CSS

input#btnUpload {background:#999;border:1px solid #666;color:#fff;cursor:pointer;display:block;margin:0 0 10px;outline:none;padding:5px;}
progress, #downloadProgress, #progUpdate {float:left;}
progress, #downloadProgress {margin-right:10px;}
#progUpdate, #downloadProgress {font:12px Arial, Verdana, sans-serif;color:#000;}

JavaScript

$('#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);

});