原文:超赞的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进度条 可以随进度显示不同颜色的更多相关文章

  1. Xamarin XAML语言教程使用属性设置进度条的当前进度

    Xamarin XAML语言教程使用属性设置进度条的当前进度 在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式:一种是 ...

  2. Axure教程:滑动进度条、圆形进度环的复杂交互效果实现方法

    滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...

  3. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  4. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  5. 用PHP Session和Javascript实现文件上传进度条,处理进度条

    参考http://www.pureweber.com/article/php-upload-progress/ php显示处理进度条http://blog.csdn.net/boabc2304/art ...

  6. 为进度条增加“伪进度条”?(使用QEventLoop和QTimer)

    在实际开发中,可能会遇到这样的场景:“一个操作非常耗时,但却无法获取其进度百分比”.造成这种情况的原因可能有: 1)该操作属于第三方库(泛指我们使用但无法修改的第三方代码,因此质量有高有底),可能由于 ...

  7. python实现进度条和百分比同时显示

    python中同时打印进度条和百分比 仅打印进度条: import sys,time for i in range(100): sys.stdout.write('>') sys.stdout. ...

  8. css实现横向进度条和竖向进度条

    一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...

  9. Android 梯形进度条、下载进度条;

    额,Gif有点卡: 梯形.矩形.圆角.背景色.前景色.进度条中的文字都可以改: <?xml version="1.0" encoding="utf-8"? ...

随机推荐

  1. 线段树(单点更新and成段更新)

    线段树需要的空间. 区间为1-->n 假设是一棵完全二叉树,且树高为i. 完全二叉树性质:第i层最多有2^(i-1)个结点. 那么 2^(i-1) = n;     i = log2(n)  + ...

  2. simplePagination API

    simplePagination API simplePagination.js 一个简单的jQuery分页插件,主题和Bootstrap支持CSS 3 分页button样式 "light- ...

  3. java表达式陷阱

    以下是一些常见的面试java问题的表达,我将造成直接的形式附加目光. 问题1: int a = 10; int b = a + (a = 5) + a + (a = 10); System.out.p ...

  4. 企业邮件系统-Postfix安装使用

    Postfix是目前流行的一套邮件传输代理软件(MTA),其作者Wietst Venema最初开发这套软件时就对总体设计.扩展能力.可用性及系统安全等方面进行了充分的考虑.由于Postfix在稳定.效 ...

  5. NYOJ710 外星人的供给站 【贪心】

    外星人的供给站 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 外星人指的是地球以外的智慧生命.外星人长的是不是与地球上的人一样并不重要,但起码应该符合我们眼下对生命基 ...

  6. Cocos性能优化工具的开发介绍Visual Studio内存泄漏检测工具——Visual Leak Detector

    然后,Windows下有什么好的内存泄漏检測工具呢?微软提供Visual Studio开发工具本身没有什么太好的内存泄漏检測功能.我们能够使用第三方工具Visual Leak Detector(下面简 ...

  7. cocos2d-x V3.0 呼叫加速度计 Acceleration

    今天克服了一个问题,我觉得非常酷 哈哈. 今天得到解决cocos2d-x 3.0 呼叫重力加速器问题,上网查了很多资料 发现是不够,不解决这个问题,我不知道如果我使用3.0 这一问题的版本号,但是,这 ...

  8. Eclipse+Maven创建webapp项目<一> (转)

    Eclipse+Maven创建webapp项目<一> 1.开启eclipse,右键new——>other,如下图找到maven project 2.选择maven project,显 ...

  9. firefox os 2.0版模拟器QQ初体验

    供firefox os 爱侣.firefox os 手机迟迟没有感到些许遗憾在中国上市会,但是,我们必须相信firefox os 登陆中国是迟早的事,腾讯QQ已经登陆firefox os 应用市场,今 ...

  10. Threejs 它可以在建立其内部房间效果可见

    Threejs 中建立可看到其内部的房间效果 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...