HTML5 Progress Bar

HTML5 progress bar example with fallback for unsupported browsers.

by kachibito

HTML

<input type="button" value="アップロード開始" id="btn" />
<div class="clear"></div>
<progress value="0" max="100" id="Bar">
    <span id="download">
 
    </span>
</progress>
<div id="Update">

</div>

CSS

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

JavaScript

$('#btn').click(function() {
    var bar = document.getElementById('Bar'),
        fallback = document.getElementById('download'),
        loaded = 0;

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

        $(fallback).empty().append("HTML5のprogressタグがサポートされていないようです: ");
        $('#Update').empty().append(loaded + "% ロード完了");

        if (loaded == 100) {
            clearInterval(beginLoad);
            $('#Update').empty().append("ロード完了！");
            console.log('ロード済みです');
        }
    };

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

});