Progress bar, is in the user enters your website, can let the user see the webpage downloading how many, this function is very obvious---is lets the user wait for the time to become longer, may effectively make up the space slow shortcoming (of course, your space is too slow, or suggest you change space, hehe)
Okay, now let me give you two examples.
One is implemented in Flash (this web site is a lot of sites are, do not say)
One is implemented with a dynamic GIF (this you can see the Microsoft Official download page, do not say)
Here, our focus is to use CSS+JS to achieve this effect
Well, nonsense don't say much, we start
First, write a paragraph of HTML code
<div id= "Loading" >
<strong id= "Loadcss" > 33%</strong>
</div>
Okay, now we're going to write the CSS code.
#loading {
width:300px;
Background-color: #000;
border:2px solid #000;
}
This is the background that we want the progress bar to be #000, black, and a border.
J
Next many loadcss to design
#loadcss {
Display:block; /* It's important to make a block * *
Background-color: # 0DF;
Text-align:center;
}
Note that the block is very important here, we use #0df this color as the color of the progress bar;
Okay, preview it.
H
Oh, but now the whole progress bar is full.
So, how do you get a show of progress?
Here, you can use an ingenious method
Modify the HTML code a little bit
Look at the following code:
<div id= "Loading" >
<strong id= "Loadcss" style= "width:33%;" > 33%</strong>
</div>
Oh, how, now the show is 33%.
But he's not moving, is he? OK, here we will use JS to achieve a bit (this JS is not my design ...)
<script language= "JavaScript" >
i=0;
function Load () {
Showload=setinterval ("Load ()", 500);
}
function Setload () {
i+=5;
if (i>=100) {
Clearinterval (SHOWLAOD);
}
document.getElementById ("Loadcss"). style.width=i+ "%";
document.getElementById ("Loadcss"). innerhtml=i+ "%";
}
</script>
OK, this JS is mainly two functions, one is load, used to open the progress bar,
The second is setload, which controls the position of the progress bar, sets a counter in Setload, and runs it once every 0.5 seconds steload.
O k, this section of JS to put in the head inside, and then call in the body, that is, <body onload= "LOAD;" >
Oh, now run the web to try, oh, is not successful, hehe.
