可以随进度显示不同颜色的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感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Python collections模块实例讲解
2014/04/07 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
《乞巧》教学反思
2014/02/27 职场文书
大学军训感言1500字
2014/03/09 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
python程序的组织结构详解
2021/12/06 Python
Python如何加载模型并查看网络
2022/07/15 Python