Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to realize the css3 progress bar of different colors can be displayed with the progress". The explanation in the article is simple and clear, and easy to learn and understand. Please follow the editor's train of thought to slowly deepen, to study and learn "how to achieve the css3 progress bar of different colors can be displayed according to the progress" bar!

A progress bar, its appearance is a straight line, there is a small ball at the end, when the progress changes, you can display the digital percentage, but also can use different colors to indicate the status of the current progress. Let's take a look at the effect.

Next, let's analyze the source code of this HTML5 progress bar, the space is limited, we only pick the core code.

The HTML code is simple to construct a progress bar container and a numeric percentage container:

The code is as follows:

0

First of all, we will render the container of the progress bar in style, and use the gradient attribute of CSS3 to achieve the effect of changing colors at different progress:

The code is as follows:

. loader-container {

Height: 6px

Width: 600px

Position: absolute

Top: 50%

Left: 50%

Margin-top:-3px

Margin-left:-300px

Background-color: transparent

Background-image:-webkit-linear-gradient (left, # 5bd8ff, # ff0000)

Background-image:-moz-linear-gradient (left, # 5bd8ff, # ff0000)

Background-image:-o-linear-gradient (left, # 5bd8ff, # ff0000)

Background-image:-ms-linear-gradient (left, # 5bd8ff, # ff0000)

Background-image: linear-gradient (left, # 5bd8ff, # ff0000)

Box-shadow: inset 0-2px 2px rgba (0,0,0,0.4)

Border-radius: 3px 0 0 3px

}

. loader-container:after {

Content: ""

Display: block

Position: absolute

Right: 0

Top: 50%

Width: 1em

Height: 1em

Border-radius: 50%

Margin-top:-0.5em

Margin-right:-1em

Background-image:-webkit-linear-gradient (top, # 000000, # 212121)

Background-image:-moz-linear-gradient (top, # 000000, # 212121)

Background-image:-o-linear-gradient (top, # 000000, # 212121)

Background-image:-ms-linear-gradient (top, # 000000, # 212121)

Background-image: linear-gradient (top, # 000000, # 212121)

}

Next is the style of the little ball at the end:

The code is as follows:

. loader-container.done:after {

Background: Red

}

.run .runner {

Content: ""

Position: absolute

Right: 0

Height: 100%

Width: 0%

Background-color: transparent

Background-image:-webkit-linear-gradient (top, # 000000, # 212121)

Background-image:-moz-linear-gradient (top, # 000000, # 212121)

Background-image:-o-linear-gradient (top, # 000000, # 212121)

Background-image:-ms-linear-gradient (top, # 000000, # 212121)

Background-image: linear-gradient (top, # 000000, # 212121)

Animation: loader 10s linear

}

Here is also the use of the gradient properties of CSS3.

Then there is the style property of the numeric percentage, where the color of the numeric percentage changes as the progress changes.

The code is as follows:

.meter {

Position: absolute

Top: 0

Right: 0

Font-size: 2em

Margin-top: .3em

Color: # ff0000

Animation: meter 10s linear

Text-shadow: 0-1px 0 # 333333

}

.meter: after {

Content: "%"

}

Finally, let's take a look at the JS code. In fact, what js needs to do is very simple. All you need to do is move the progress bar rendered by CSS3. Look at the code:

The code is as follows:

Var Loader = function () {

Var loader = document.querySelector ('.loader-container')

Meter = document.querySelector ('.meter')

K, I = 1

Counter = function () {

If (I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.