The top CSS3 progress bar displays different colors with the progress

The current WEB is no longer the old WEB. It transfers more data and has more complex computation. This requires the use of progress bars to improve user experience. If necessary, users can wait patiently, your webpage will not be turned off because of the Operation card. A few days ago, I saw something on the internet that is not the same as a general progress bar. It looks like a straight line and has a ball at the end. When the progress changes, the percentage of digits can be displayed, you can also use different colors to indicate the status of the current progress. Let's take a look.

Check the progress bar.

Next, let's analyze the source code of the HTML5 progress bar. The length is limited. Let's just look at the core code.

The HTML code is simple. Construct a progress bar container and a digital percentage container:

  0  

First, we will perform style rendering on the container of the progress bar, and use the gradient attribute of CSS3 to achieve the effect of changing colors at different progresses:

{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;}

Next is the style of the small circle at the end:

{:;}{:;:;:;:;:;:;:;:;:;:;:;:;}

The gradient attribute of CSS3 is also used here.

Then there is the style attribute of the digit percentage. The color of the digit percentage also changes as the progress changes. ,

{:;:;:;:;:;:;:;:;}{:;}

Finally, let's take a look at the JS Code. In fact, the work to be done by js is very simple, just move the progress bar rendered by CSS3, and look at the Code:

 Loader =  loader = document.querySelector('.loader-container'= document.querySelector('.meter'= 1=  (i <= 100=++= options || time = options.time ? options.time : 0= time/100;'run'='done'      time: 10000

When I write a blog for the first time, the code analysis is not very good. If you have any questions, I can leave a message to correct them. However, I really like this progress bar. the creativity of foreigners is really unlimited.