Progress bar effect implemented with CSS JS_javascript skills

The progress bar allows users to see how much the web page has been downloaded when they enter your website. The effect of this is very obvious - it makes the user's waiting time longer, which can effectively make up for the shortcomings of slow space (of course , your space is too slow, I suggest you change the space, haha)
Okay, now I will give you two examples
One is implemented using FLASH (many websites on the Internet are like this, so I won’t go into details)
One is implemented using dynamic GIF (you can check this out from Microsoft’s official download page, I won’t talk about it)
Here, our focus is to use CSS JS to achieve this effect
Okay, no more nonsense Say more, let’s start
First, write a piece of HTML code

33%

Okay, now let’s write the CSS code
}

This is what we want the background color of the progress bar to be #000, black, and add a border

j
The next step is to design with loadcss

#loadcss {

display: block ; /*very important, make it into blocks*/

background-color: # 0df;

text -align : center;

                                                                                                                                                                                   🎜>Haha, but now the entire progress bar is full

So, how can we display the progress?

Here, we can use a clever method

Modify the HTML code slightly

Look at the following code:




                                                                                               🎜>
Hehe, how about it, now it shows 33%

But, he doesn’t move, right? Okay, let’s use JS to implement it (this JS is not designed by me) ...)




OK, this JS mainly consists of two functions, one is load , used to open the progress bar,

                                              setload is used to control the position of the progress bar. Set a counter in setload and run steload every 0.5 seconds.

OK, this JS should be placed in HEAD and then called in BODY, that is,

Haha, try running the webpage now, haha, is it successful?