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#手动做一个负载均衡服务器
思路 负载均衡服务器最出名的当数 Nginx了.Nginx服务器通过异步的方式把连接转发给内网和N个服务器,用来分解单台应用服务器的压力,了解了原理及场景后,用C#来实现一个.思路如下: 1. 使用一 ...
- 转：判断DATASET是否为空
http://blog.sina.com.cn/jiangshuqin2010 1,if(ds == null) 这是判断内存中的数据集是否为空,说明DATASET为空,行和列都不存在!! 2,if( ...
- [JS3] 立即执行JS
<html> <head> <title>立即执行</title> <SCRIPT TYPE="text/JavaScript" ...
- javaweb学习总结(二十七)——jsp简单标签开发案例和打包
一.开发标签库 1.1.开发防盗链标签 1.编写标签处理器类:RefererTag.java 1 package me.gacl.web.simpletag; 2 3 import java.io.I ...
- JAVA的安装与软件使用
1.JAVA的安装与环境 2.练习: (1)初识java (2)使用eclipse输出自己的名字
- iOS开发实用技巧—Objective-C中的各种遍历（迭代）方式
iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...
- 【由VerySky原创】CX51、CX52 ——数据表
今天通过DEBUG CX52 得出所保存的数据表是ECMCA:
- HOWTO: InstallScript MSI工程取Log
InstallShield的各种类型安装包如果遇到安装问题(尤其是在客户安装时遇到问题),获取Log分析是最有效的方法之一. 对于封装一个Setup.exe的InstallScript MSI工程,我 ...
- Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(二)
一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(一)篇 二.本篇目标: l 说说关于cocos2dx手机分辨率适配 l 对前一篇完成的塔防游戏原型进 ...
- CCNA实验2.VLAN
一. 二.配置主VTP上的信息 sw2上配置为domain server,sw1上配置为domain client,sw2上增加vlan并命名和添加描述 conf t vtp domain corp ...