可以随进度显示不同颜色的css3进度条分享


Posted in HTML / CSS onApril 11, 2014

一款进度条,它的外观是一条直线,末端有个小球,在进度变化时可以显示数字百分比,更可以用不同颜色来表示当前进度的状态。来看看效果图。

可以随进度显示不同颜色的css3进度条分享

接下来我们来分析一下这款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: 0;
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: 0;
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: 0;
right: 0;
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
});

源码打包下载地址:http://xiazai.3water.com/201403/tools/css3jdt.rar

HTML / CSS 相关文章推荐
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 #HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 #HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 #HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 #HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 #HTML / CSS
You might like
PHP截取中文字符串的问题
2006/07/12 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
Javascript开发包大全整理
2006/12/22 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python函数不定长参数使用方法解析
2019/12/14 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
户籍证明格式
2014/09/15 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
大学生自荐信范文
2015/03/05 职场文书
《迟到》教学反思
2016/02/24 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS