HTML5 Progress Bar

HTML5 progress bar example with fallback for unsupported browsers.

by chridam

HTML

<div class="order-element">
<div class="input">
    <label for="target">Test 1</label>
    <input disabled="disabled" type="text" id="test1" class="target" />
    
    <label for="target">Test 2</label>
    <input type="text" id="test2" class="target" />
    
    <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>
</div>
</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;   
        $('.target').attr("disabled", true);
        
        /* 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.');   
            $('.target').removeAttr("disabled");   
            $('#test1').attr("disabled", true);
        }
    };
    
    var beginLoad = setInterval(function() {
        load();
    }, 50);

});