css+js如何实现简单的动态进度条效果?(代码实例)

青灯夜游
发布: 2018-10-31 17:28:46
原创
4609 人浏览过

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代码:

 
登录后复制

css代码:

#wrapper{ position: relative; width:200px; height:100px; border:1px solid darkgray; } #progressbar{ position: absolute; top:50%; left:50%; margin-left:-90px; margin-top:-10px; width:180px; height:20px; border:1px solid darkgray; } /*在进度条元素上调用动画*/ #fill{ animation: move 2s; text-align: center; background-color: #6caf00; } /*实现元素宽度的过渡动画效果*/ @keyframes move { 0%{ width:0; } 100%{ width:100%; } }
登录后复制

js代码:

var progressbar={ init:function(){ var fill=document.getElementById('fill'); var count=0; //通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置 var timer=setInterval(function(e){ count++; fill.innerHTML=count+'%'; if(count===100) clearInterval(timer); },17); } }; progressbar.init();
登录后复制

效果图:

1.gif

总结:以上就是本篇文章所介绍的css+js实现简单的动态进度条效果的全部内容,大家可以自己动手试试,加深理解,制作不同的进度条效果,希望能对大家的学习有所帮助。

相关推荐:

html5如何实现简单进度条效果?动态进度条的实现

css中clip属性是什么?clip:rect()制作圆形进度条动画

js实现自定义拖动进度条效果

以上是css+js如何实现简单的动态进度条效果?(代码实例)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!