Result

jQuery

//クリックイベント
$('#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 + "% ロード完了");
        //100%に達した際のメッセージ表示
        if (loaded == 100) {
            clearInterval(beginLoad);
            $('#Update').empty().append("ロード完了！");
            console.log('ロード済みです');
        }
    };
    var beginLoad = setInterval(function() {
        load();
    }, 50);
});​

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;}​

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>​

via

HTML5 Progress Bar Mobile Version