CODEWITHSUNDEEP
jqueryhtmlcss
oliverbj
oliverbj

Reputation: 6062

jQuery - Fill progressbar on page load

I have this progress bar made with 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)}

The HTML for the progressbar look like this:

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

Currently my jQuery code looks like this:

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

Although this doesn't work. It doesn't do anything. How can I do this correct?

Little note: I would also like the text inside the tags to increase.

Upvotes: 1

Views: 6089

Answers (1)

WooCaSh
WooCaSh

Reputation: 5212

You use wrong jQuery selector instead of:

$('#progressBar > .green').animate({...});

write 

$('#progressBar.green').animate({...});

http://jsfiddle.net/jfGE9/1/

Upvotes: 1

Related Questions