css3彩色进度条
<html>
<head>
<title>progress</title>
<script type="text/javascript" src="../jQuery1.7.js"></script>
<style type="text/css">
body{
margin: 0;
width: 100%;
height: 100%;
background: #333;
}
#wrapper{
height: 6px;
width: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -3px;
margin-left: -300px;
background-color: transparent;
background-image: -webkit-linear-gradient(top,#000,#212121);
background-image: -moz-linear-gradient(top,#000,#212121);
background-image: -ms-linear-gradient(top,#000,#212121);
background-image: linear-gradient(top,#000,#212121);
box-shadow: inset 0 -2px 2px rgba(0,0,0,0.4);
border-radius: 3px 0 0 3px;
}
.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: -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,#000,#212121);
background-image: -moz-linear-gradient(top,#000,#212121);
background-image: -ms-linear-gradient(top,#000,#212121);
background-image: linear-gradient(top,#000,#212121);
}
.loader-container.done:after {
background: Red;
}
.run .runner {
content: "";
position: absolute;
right: 0;
height: 100%;
width: 0%;
overflow: hidden;
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);
-webkit-animation: loader 10s linear;
}
.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: "%";
}
@-webkit-keyframes loader{
0%{
width: 100%;
}
100%{
width: 0%;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div class="loader-container">
<div class="meter">0</div>
<span class="runner"></span>
</div>
</div>
<script type="text/javascript">
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
});
</script>
</body>
</html>
css3彩色进度条的更多相关文章
- CSS3彩色进度条加载动画 带进度百分比
在线演示 本地下载
- CSS3动画进度条
CSS3动画进度条 CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...
- 纯CSS3制作进度条源代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 详解在Linux下实现(彩色)进度条程序,并通过makefile进行编译.
彩色进度条的实现与makefile编译: 创建一个process文件,在里面编写实现进度条的代码 1.在编写代码的时候我们首先要区分两个转义字符:\n \r \n:表示换行,换到下一行,并位于起 ...
- Javascript 及 CSS3 实现进度条效果
Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...
- 两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
- css3实现进度条的模拟
两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html> <head> < ...
- css3条纹进度条
新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...
- 学习 | css3实现进度条加载
进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...
随机推荐
- C#函数式编程之惰性求值
惰性求值 在开始介绍今天要讲的知识之前,我们想要理解严格求值策略和非严格求值策略之间的区别,这样我们才能够深有体会的明白为什么需要利用这个技术.首先需要说明的是C#语言小部分采用了非严格求值策略,大部 ...
- 设计模式之美:Adapter(适配器)
索引 别名 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):简单直接的对象适配器. 实现方式(二):实现双向类适配器. 别名 包装器(Wrapper) 意图 将一个类的接口转换成客户 ...
- C语言 线性表 链式表结构 实现
一个单链式实现的线性表 mList (GCC编译). /** * @brief 线性表的链式实现 (单链表) * @author wid * @date 2013-10-21 * * @note 若代 ...
- 集群NAS技术架构
http://blog.csdn.net/liuaigui/article/details/6422700
- servlet 读取web.xml参数
1初始化参数init-param init-param是配置在web.xml的<servlet>标签里的,也就是说,是归该servlet单独所有的. 实例 <servlet> ...
- SQL order by的用法
首先,order by是用来写在where之后,给多个字段来排序的一个DQL查询语句. 其次,order by写法: 1. select 字段列表/* from 表名 where 条件 order ...
- paip.环境设置 mybatis ibatis cfg 环境设置
paip.环境设置 mybatis ibatis cfg 环境设置 三部分 //////////1. 电泳.... ............2. 猪配置文件 com/mijie/homi/searc ...
- iOS开发-图片高斯模糊效果
iOS开发的时候有的时候需要将图片设置模糊,或者通过点击下拉方法,去除模糊,一切都是为了应用更受用户欢迎,iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果 ...
- chrome浏览器扩展的事件处理
关于chrome扩展开发的栗子已经有很多了,问问度娘基本能满足你的欲望, 我想说的是扩展和页面间的数据传递问题. 我们知道写扩展有个必须的文件就是“manifest.json”, 这个里面定义了一个和 ...
- web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...