Jquery simple progress bar implementation code

In fact, I originally planned to be a web designer, but no one thought that I was well designed. So far, my brother has no job yet. Let's just let it go.

Images to be used:

Background image:

Progress display image:

Webpage structure:
Copy codeThe Code is as follows:
<Div id = "center">
<Div id = "message"> </div>
<Div id = "loading"> <div> </div>
</Div>

Css code:
Code
Copy codeThe Code is as follows:
# Center {
Margin: 50px auto;
Width: 400px;
}
# Loading {
Width: pixel PX;
Height: 49px;
Background: url(bak.png) no-repeat;
}
# Loading div {
Width: 0px;
Height: 48px;
Background: url(pro.png) no-repeat;
Color: # fff;
Text-align: center;
Font-family: Tahoma;
Font-size: 18px;
Line-height: 48px;
}
# Message {
Width: 200px;
Height: 35px;
Font-family: Tahoma;
Font-size: 12px;
Background-color: # d8e7f0;
Border: 1px solid # 187CBE;
Display: none;
Line-height: 35px;
Text-align: center;
Margin-bottom: 10px;
Margin-left: 50px;

JavaScript code:
Code
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery-1.3.2.js"> </script>
<Script type = "text/javascript">
Var progress_id = "loading ";
Function SetProgress (progress ){
If (progress ){
$ ("#" + Progress_id + "> div" ).css ("width", String (progress) + "%"); // control # loading div width
$ ("#" + Progress_id + "> div" ).html (String (progress) + "%"); // display percentage
}
}
Var I = 0;
Function doProgress (){
When (I> 100 ){
$ ("# Message" finished .html ("loaded! "). FadeIn (" slow "); // loading completion prompt
Return;
}
If (I <= 100 ){
SetTimeout ("doProgress ()", 100 );
SetProgress (I );
I ++;
}
}
$ (Document). ready (function (){
DoProgress ();
});
</Script>