Jquery + css implement simple progress bar Effects

Jquery actually has a progress bar plug-in called jqueryprogressbar. js. But if you want to practice it, it's useless. You have written some code yourself. This code is actually for reference to others, because its JS basics are not very good.

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:

<Div id = "center">
<Div id = "message"> </div>
<Div id = "loading"> <div>
</Div>

# 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:

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

Source: http://www.cnblogs.com/gxll1314/