Width: 300px;
Background-color: #000;
Border: 2px solid #000;
}
This is what we want the background color of the progress bar to be #000, black, and a border.
J
Next, design multiple loadcss instances.
# Loadcss {
Display: block;/* It is very important to create a block */
Background-color: # 0df;
Text-align: center;
}
Note that the BLOCK here is very important. We use the color # 0df as the color of the progress bar;
Okay. Preview It.
H
But now the entire progress bar is full.
So how can we display the progress?
Here, you can use a clever Method
Slightly modify the HTML code
See the following code:
<Div id = "loading">
<Strong id = "loadcss" style = "width: 33%;"> 33% </strong>
</Div>
Haha, how is it? Now it shows 33%.
But he doesn't move, right? Okay. Now we will use JS to implement it (this JS is not designed by me ...)
<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>
Okay. This section of JS mainly contains two functions: load, which is used to enable the progress bar,
The second is setload, which is used to control the position of the progress bar. Set a counter in setload and run steload every 0.5 seconds.
O k. This JS file should be placed in the HEAD and then called in the BODY, that is, <body onload = "LOAD;">
Now, run the web page and try again.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
