css+js怎么实现简单的动态进度条效果

这篇文章主要介绍css+js怎么实现简单的动态进度条效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

　　我们要知道，这里主要使用了css3的animation动画属性，首先将进度条设置为一个初始宽度为0，背景色为绿色，高度与容器相同的元素；在通过animation动画属性对其宽度进行过渡，从而实现进度条填充的效果。

　　我们来看看css3的animation动画属性的相关知识。

　　animation属性是一个简写属性，用于设置六个动画属性：

　　animation-name：规定需要绑定到选择器的keyframe名称；

　　animation-duration：规定完成动画所花费的时间，以秒或毫秒计；

　　animation-timing-function：规定动画的速度曲线；

　　animation-delay：规定在动画开始之前的延迟；

　　animation-iteration-count：规定动画应该播放的次数；

　　animation-direction：规定是否应该轮流反向播放动画

　　下面我们来看看具体的实现动态进度条效果的方法。

　　css+js实现简单的动态进度条效果的代码示例：

　　html代码：

　　<!--外层容器-->

　　<divid="wrapper">

　　<!--进度条容器-->

　　<divid="progressbar">

　　<!--用来模仿进度条推进效果的进度条元素-->

　　<divid="fill"></div>

　　</div>

　　</div>

　　css代码：

　　#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;

　　}

　　/*在进度条元素上调用动画*/

　　#fill{

　　animation:move2s;

　　text-align:center;

　　background-color:#6caf00;

　　}

　　/*实现元素宽度的过渡动画效果*/

　　@keyframesmove{

　　0%{

　　width:0;

　　}

　　100%{

　　width:100%;

　　}

　　}

　　js代码：

　　varprogressbar={

　　init:function(){

　　varfill=document.getElementById('fill');

　　varcount=0;

　　//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置

　　vartimer=setInterval(function(e){

　　count++;

　　fill.innerHTML=count+'%';

　　if(count===100)clearInterval(timer);

　　},17);

　　}

　　};

　　progressbar.init();

以上是“css+js怎么实现简单的动态进度条效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！