How to realize simple dynamic progress bar effect by css+js
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!
