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

This article mainly introduces css+js how to achieve a simple dynamic progress bar effect, the article is very detailed, has a certain reference value, interested friends must read it!

We need to know that the animation animation attribute of css3 is mainly used here. First, the progress bar is set to an element whose initial width is 0, the background color is green, and the height is the same as that of the container. The width is transitioned through the animation animation attribute to achieve the effect of filling the progress bar.

Let's take a look at the animation animation properties of css3.

The animation property is an abbreviated property that sets six animation attributes:

Animation-name: specifies the keyframe name that needs to be bound to the selector

Animation-duration: specifies the time it takes to complete the animation, in seconds or milliseconds

Animation-timing-function: specifies the speed curve of the animation

Animation-delay: specifies the delay before the animation starts

Animation-iteration-count: specifies the number of times the animation should be played

Animation-direction: specifies whether the animation should be played in reverse in turn

Let's take a look at the specific ways to achieve the effect of a dynamic progress bar.

Css+js code example that implements a simple dynamic progress bar effect:

Html Code:

Css Code:

# wrapper {

Position:relative

Width:200px

Height:100px

Border:1pxsoliddarkgray

}

# progressbar {

Position:absolute

Top:50%

Left:50%

Margin-left:-90px

Margin-top:-10px

Width:180px

Height:20px

Border:1pxsoliddarkgray

}

/ * call animation on the progress bar element * /

# fill {

Animation:move2s

Text-align:center

Background-color:#6caf00

}

/ * realize the transition animation effect of element width * /

@ keyframesmove {

0% {

Width:0

}

100% {

Width:100%

}

}

Js Code:

Varprogressbar= {

Init:function () {

Varfill=document.getElementById ('fill')

Varcount=0

/ / the percentage text effect is achieved through the interval timer, and the interval is set by calculating the duration of CSS animation.

Vartimer=setInterval (function (e) {

Count++

Fill [XSS _ clean] = count+'%'

If (count===100) clearInterval (timer)

}, 17)

}

}

Progressbar.init ()

The above is all the content of the article "how to achieve simple dynamic progress bar effect in css+js". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.