可以随进度显示不同颜色的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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
基于CSS3画一个iPhone
Apr 21 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/10/09 PHP
一个php作的文本留言本的例子(一)
2006/10/09 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python使用Tesseract库识别验证
2018/03/21 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
python3 下载网络图片代码实例
2019/08/27 Python
解析Python3中的Import
2019/10/13 Python
自荐书格式
2013/12/01 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
新教师工作感言
2014/02/16 职场文书
工程承诺书怎么写
2014/05/24 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书