jquery - jQuery - ページ読み込み時にプログレスバーを埋める

Question

CSSで作成したこのプログレスバーがあります：

CSS

.progress{height:20px;background:#ebebeb;border-left:1px solid transparent;border-right:1px solid transparent;border-radius:10px}
.progress>span{position:relative;float:left;margin:0 -1px;min-width:30px;height:18px;line-height:16px;text-align:right;background:#ccc;border:1px solid;border-color:#bfbfbf #b3b3b3 #9e9e9e;border-radius:10px;background-image:-webkit-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#ccc);background-image:-moz-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#ccc);background-image:-o-linear-gradient(top,#f0f0f0,#dbdbdb 70%,#ccc);background-image:linear-gradient(to bottom,#f0f0f0,#dbdbdb 70%,#ccc);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2)}
.progress>span>span{padding:0 8px;font-size:11px;font-weight:bold;color:#404040;color:rgba(0,0,0,0.7);text-shadow:0 1px rgba(255,255,255,0.4)}
.progress>span:before{content:'';position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;height:18px;background:url("../images/progress.png") 0 0 repeat-x;border-radius:10px}
.progress .green{background:#85c440;border-color:#78b337 #6ba031 #568128;background-image:-webkit-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:-moz-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:-o-linear-gradient(top,#b7dc8e,#99ce5f 70%,#85c440);background-image:linear-gradient(to bottom,#b7dc8e,#99ce5f 70%,#85c440)}

プログレスバーの HTML は次のようになります。

<div class='progress'>
<span class='green' style='width: 1%;' id='progressBar'><span>1%</span></span>
</div>

現在、私のjQueryコードは次のようになっています：

$(document).ready(function(){
 $('#progressBar').progressbar({
             value: 1
         });
});
var statusTracker;
var percentage = 0;

function checkStatus() {
    percentage = percentage + 5;
    $('#progressBar > .green').animate({
        width : percentage + '%'
    });

    if (percentage == 100) stop();
}
function startProgress(){
    statusTracker = setInterval(checkStatus, 500);
}

function stop() {
    clearInterval(statusTracker);
}
$(document).ready(startProgress); 

これは機能しませんが。それは何もしません。どうすればこれを正しく行うことができますか?

ちょっとしたメモ: タグ内のテキストも増やしたいと思います。