超赞的CSS3进度条 可以随进度显示不同颜色
现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡了而关掉你的网页。前几天我在网上看到一款和一般进度条不太一样的玩意,它的外观是一条直线,末端有个小球,在进度变化时可以显示数字百分比,更可以用不同颜色来表示当前进度的状态。来看看效果图。
一看进度条外观,还不错吧。
同时,我们也可以在这里看到进度条的DEMO演示
接下来我们来分析一下这款HTML5进度条的实现源码,篇幅有限,我们只挑核心的代码来说。
HTML代码很简单,构造一个进度条容器和数字百分比容器:
<div id="wrapper">
<div class="loader-container">
<div class="meter">0</div>
<span class="runner"></span>
</div>
</div>
首先我们来对进度条的容器进行样式渲染,利用CSS3的渐变属性来实现不同进度变换颜色的效果:
.loader-container {
height: 6px;
width: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -3px;
margin-left: -300px;
background-color: transparent;
background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
background-image: linear-gradient(left, #5bd8ff, #ff0000);
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
border-radius: 3px 0 0 3px;
}
.loader-container:after {
content: "";
display: block;
position: absolute;
right:;
top: 50%;
width: 1em;
height: 1em;
border-radius: 50%;
margin-top: -0.5em;
margin-right: -1em;
background-image: -webkit-linear-gradient(top, #000000, #212121);
background-image: -moz-linear-gradient(top, #000000, #212121);
background-image: -o-linear-gradient(top, #000000, #212121);
background-image: -ms-linear-gradient(top, #000000, #212121);
background-image: linear-gradient(top, #000000, #212121);
}
接下来是末端小圆球的样式:
.loader-container.done:after {
background: Red;
}
.run .runner {
content: "";
position: absolute;
right:;
height: 100%;
width: 0%;
background-color: transparent;
background-image: -webkit-linear-gradient(top, #000000, #212121);
background-image: -moz-linear-gradient(top, #000000, #212121);
background-image: -o-linear-gradient(top, #000000, #212121);
background-image: -ms-linear-gradient(top, #000000, #212121);
background-image: linear-gradient(top, #000000, #212121);
animation: loader 10s linear;
}
这里也是利用的CSS3的渐变属性。
然后是数字百分比的样式属性,这里随着进度变化,数字百分比的颜色也会发生变化。、
.meter {
position: absolute;
top:;
right:;
font-size: 2em;
margin-top: .3em;
color: #ff0000;
animation: meter 10s linear;
text-shadow: 0 -1px 0 #333333;
}
.meter:after {
content: "%";
}
最后,我们再来看看JS代码,其实js要完成的工作非常简单,只需要将CSS3渲染好的进度条动起来就好,看代码:
var Loader = function () {
var loader = document.querySelector('.loader-container'),
meter = document.querySelector('.meter'),
k, i = 1,
counter = function () {
if (i <= 100) {
meter.innerHTML = i.toString();
i++;
} else {
window.clearInterval(k);
}
}; return {
init: function (options) {
options = options || {};
var time = options.time ? options.time : 0,
interval = time/100; loader.classList.add('run');
k = window.setInterval(counter, interval);
setTimeout(function () {
loader.classList.add('done');
}, time);
},
}
}(); Loader.init({
// If you have changed the @time in LESS, update this number to the corresponding value. Measured in miliseconds.
time: 10000
});
初次写博客,可以代码分析的不是很好,有什么问题可以留言指正,不过,这款进度条个人真的很喜欢,老外的创意真是无限啊。
超赞的CSS3进度条 可以随进度显示不同颜色的更多相关文章
- Xamarin XAML语言教程使用属性设置进度条的当前进度
Xamarin XAML语言教程使用属性设置进度条的当前进度 在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式:一种是 ...
- Axure教程:滑动进度条、圆形进度环的复杂交互效果实现方法
滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...
- CSS实现进度条和订单进度条
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- 用PHP Session和Javascript实现文件上传进度条,处理进度条
参考http://www.pureweber.com/article/php-upload-progress/ php显示处理进度条http://blog.csdn.net/boabc2304/art ...
- 为进度条增加“伪进度条”?(使用QEventLoop和QTimer)
在实际开发中,可能会遇到这样的场景:“一个操作非常耗时,但却无法获取其进度百分比”.造成这种情况的原因可能有: 1)该操作属于第三方库(泛指我们使用但无法修改的第三方代码,因此质量有高有底),可能由于 ...
- python实现进度条和百分比同时显示
python中同时打印进度条和百分比 仅打印进度条: import sys,time for i in range(100): sys.stdout.write('>') sys.stdout. ...
- css实现横向进度条和竖向进度条
一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...
- Android 梯形进度条、下载进度条;
额,Gif有点卡: 梯形.矩形.圆角.背景色.前景色.进度条中的文字都可以改: <?xml version="1.0" encoding="utf-8"? ...
随机推荐
- 线段树(单点更新and成段更新)
线段树需要的空间. 区间为1-->n 假设是一棵完全二叉树,且树高为i. 完全二叉树性质:第i层最多有2^(i-1)个结点. 那么 2^(i-1) = n; i = log2(n) + ...
- simplePagination API
simplePagination API simplePagination.js 一个简单的jQuery分页插件,主题和Bootstrap支持CSS 3 分页button样式 "light- ...
- java表达式陷阱
以下是一些常见的面试java问题的表达,我将造成直接的形式附加目光. 问题1: int a = 10; int b = a + (a = 5) + a + (a = 10); System.out.p ...
- 企业邮件系统-Postfix安装使用
Postfix是目前流行的一套邮件传输代理软件(MTA),其作者Wietst Venema最初开发这套软件时就对总体设计.扩展能力.可用性及系统安全等方面进行了充分的考虑.由于Postfix在稳定.效 ...
- NYOJ710 外星人的供给站 【贪心】
外星人的供给站 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 外星人指的是地球以外的智慧生命.外星人长的是不是与地球上的人一样并不重要,但起码应该符合我们眼下对生命基 ...
- Cocos性能优化工具的开发介绍Visual Studio内存泄漏检测工具——Visual Leak Detector
然后,Windows下有什么好的内存泄漏检測工具呢?微软提供Visual Studio开发工具本身没有什么太好的内存泄漏检測功能.我们能够使用第三方工具Visual Leak Detector(下面简 ...
- cocos2d-x V3.0 呼叫加速度计 Acceleration
今天克服了一个问题,我觉得非常酷 哈哈. 今天得到解决cocos2d-x 3.0 呼叫重力加速器问题,上网查了很多资料 发现是不够,不解决这个问题,我不知道如果我使用3.0 这一问题的版本号,但是,这 ...
- Eclipse+Maven创建webapp项目<一> (转)
Eclipse+Maven创建webapp项目<一> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...
- firefox os 2.0版模拟器QQ初体验
供firefox os 爱侣.firefox os 手机迟迟没有感到些许遗憾在中国上市会,但是,我们必须相信firefox os 登陆中国是迟早的事,腾讯QQ已经登陆firefox os 应用市场,今 ...
- Threejs 它可以在建立其内部房间效果可见
Threejs 中建立可看到其内部的房间效果 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...