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=& ...
随机推荐
- ARCGIS FOR JAVASCRIPT API 出现multipleDefine问题
问题: Error {src: "dojoLoader", info: Object, stack: (...), message: "multipleDefine&qu ...
- (译)开发优秀的虚拟现实体验:从开发I Expect You to Die中总结的六个要点
这篇文章是我从网上找来的,我觉得他非常详细的解释了VR发展的需求和必要.我认为通过这篇文章可以让大家了解VR. 译者写在最前: 来到追光动画有好几个月了,抱歉这段时间也没有什么文章与大家分享,我现在在 ...
- java基础接口练习
1.编写2个接口:InterfaceA和InterfaceB:在接口InterfaceA中有个方法voidprintCapitalLetter():在接口InterfaceB中有个方法void pri ...
- Leetcode 189 Rotate Array stl
题意:将数组旋转k次,如将数组[1,2,3,4,5]旋转1次得到[2,3,4,5,1],将数组[1,2,3,4,5]旋转2次得到[3,4,5,1,2]..... 本质是将数组分成两部分a1,a2,.. ...
- mac上安装homebrew
1:关于homebrew下载地址 homebrew下载地址网上版本很多:我用了几个都是显示 404 bad request 如图:均无法现在 有一个网址会给出最新的 安装地址: the URL is: ...
- 多看Kindle的“导出失败,请检查网络或账号”错误的解决
一直都用得好好的,今天突然不行了,报错“导出失败,请检查网络或账号”. 网上搜索,试了一下这个方法: 我目前的解决办法是:先同步至小米账户(需要联网,并在Kindle系统设置 -> 阅读 -&g ...
- PuppetOpenstack Newton Design Summit见闻
PS:技术博客已经好久没有来耕耘了,倒不是懒惰,而是最近一直在忙着写一本关于Openstack自动化部署的书籍,我觉得可能会比单独零散的技术文章更有价值一些. 作为重度拖延症患者,又把本来奥斯汀峰会期 ...
- EMW 性能优化二之---并发配置
EMW 性能优化二之---并发配置 在前一个日志中写到交货的异步更新,对于RFUI RF的前台操作会提升效率,异步更新不用等待更新状态的返回,启用更新队列的方式执行(SM13). 下面再补全性能相关的 ...
- 2014中国软件开发者调查(一):Java最受欢迎 第二语言JS使用比例最高
2014 年 3 月 20 日到 4 月 25 日期间,CSDN 通过在线问卷渠道进行了中国软件开发者调查,本次调查问卷得到了近万名开发者踊跃支持.日前这份调查报告已经出炉,CSDN 将就调查结果连续 ...
- AYUI4.X即将发布
AYUI里程碑故事: AYUI 1.x系列: 面向源码的方式开发,客户只有源码才能开发,客户端对接ayui,很不方便,相比上个版本,提供了一些元老控件,文件夹结构比较零散 AYUI 2.x系列: ...