顺德网站设计,成都网站优化方式,八角网站建设,新浪微博网页版qq登录入口今天给大家带来一个比较炫的进度条#xff0c;进度条在一耗时操作上给用户一个比较好的体验#xff0c;不会让用户觉得在盲目等待#xff0c;对于没有进度条的长时间等待#xff0c;用户会任务死机了#xff0c;毫不犹豫的关掉应用#xff1b;一般用于下载任务#xff0…今天给大家带来一个比较炫的进度条进度条在一耗时操作上给用户一个比较好的体验不会让用户觉得在盲目等待对于没有进度条的长时间等待用户会任务死机了毫不犹豫的关掉应用一般用于下载任务删除大量任务网页加载等如果有使用html5为手机布局的也可以用于手机中~效果图1、html结构0%简单分析下p.loadBar代表整个进度条p.loadBar p 设置了圆角表框 p.loadBar p span 为进度 (动态改变宽度) p.loadBar p span i 为进度填充背景色(即width100%)HTML的结构大家可以自己设计只要合理都没有问题~2、CSSbody{font-family: Thoma, Microsoft YaHei, Lato, Calibri, Arial, sans-serif;}#content{margin: 120px auto;width: 80%;}.loadBar{width: 600px;height: 30px;border: 3px solid #212121;border-radius: 20px;position: relative;}.loadBar p{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}.loadBar p span, .loadBar p i{box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .4);width: 0%;display: block;height: 100%;position: absolute;top: 0;left: 0;border-radius: 20px;}.loadBar p i{width: 100%;-webkit-animation: move .8s linear infinite;background: -webkit-linear-gradient(left top, #7ed047 0%, #7ed047 25%, #4ea018 25%, #4ea018 50%, #7ed047 50%, #7ed047 75%, #4ea018 75%, #4ea018 100%);background-size: 40px 40px;}.loadBar .percentNum{position: absolute;top: 100%;right: 10%;padding: 1px 15px;border-bottom-left-radius: 16px;border-bottom-right-radius: 16px;border: 1px solid #222;background-color: #222;color: #fff;}-webkit-keyframes move{0%{background-position: 0 0;}100%{background-position: 40px 0;}}此时效果为整体布局就是利用position relative和absolute~比较难的地方就是渐变条的实现我们采用a、从左上到右下的渐变b、颜色分别为0-25% 为#7ed047 25%-50% 为#4ea018 50%-75%为#7ed047 75%-100%为#4ea018c、背景的大小为40px 40px 这个设置超过高度就行 越大条文宽度越宽分析图设置的原理就是上图了同时可以背景宽度设置越大条文宽度越大3、设置Js创建LoadBar对象function LoadingBar(id){this.loadbar $(# id);this.percentEle $(.percent, this.loadbar);this.percentNumEle $(.percentNum, this.loadbar);this.max 100;this.currentProgress 0;}LoadingBar.prototype {constructor: LoadingBar,setMax: function (maxVal){this.max maxVal;},setProgress: function (val){if (val this.max){val this.max;}this.currentProgress parseInt((val / this.max) * 100) %;this.percentEle.width(this.currentProgress);this.percentNumEle.text(this.currentProgress);}};我们创建了一个LoadBar对象同时公开了两个方法一个设置最大进度一个设置当前进度比如下载文件最大进度为文件大小当前进度为已下载文件大小。4、测试最后我们测试下我们的代码$(function (){var loadbar new LoadingBar(loadBar01);var max 1000;loadbar.setMax(max);var i 0;var time setInterval(function (){loadbar.setProgress(i);if (i max){clearInterval(time);return;}i 10;}, 40);});
