<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彩色进度条的更多相关文章

  1. CSS3彩色进度条加载动画 带进度百分比

    在线演示       本地下载

  2. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  3. 纯CSS3制作进度条源代码

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 详解在Linux下实现(彩色)进度条程序，并通过makefile进行编译.

    彩色进度条的实现与makefile编译: 创建一个process文件,在里面编写实现进度条的代码    1.在编写代码的时候我们首先要区分两个转义字符:\n \r \n:表示换行,换到下一行,并位于起 ...

  5. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  6. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  7. css3实现进度条的模拟

    两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html>    <head>        < ...

  8. css3条纹进度条

    新建div,取名progress,如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度: <di ...

  9. 学习 | css3实现进度条加载

    进度条加载是页面加载时的一种交互效果,这样做的目的是提高用户体验. 进度条的的实现分为3大部分:1.页面布局,2.进度条动效,3.何时进度条增加. 文件目录 加载文件顺序 <link rel=& ...

随机推荐

  1. C#函数式编程之惰性求值

    惰性求值 在开始介绍今天要讲的知识之前,我们想要理解严格求值策略和非严格求值策略之间的区别,这样我们才能够深有体会的明白为什么需要利用这个技术.首先需要说明的是C#语言小部分采用了非严格求值策略,大部 ...

  2. 39行代码实现JS HTML模板（轻量+高效+易用）

    otmpl 是一个轻量级前端模版(仅有39行无压缩代码,支持缓存),所用指令仅需[#...#]和{#...#},前者包含需要输出html语句,后者包含js变量. 支持javascript完整语法,你可 ...

  3. 作业七：团队项目——Alpha版本冲刺阶段-01

    昨天进展:准备开发环境,安装软件. 今天安排:软件框架设计. 小组一共三人,陈芝航因家里有事,与我们进行了QQ视屏会议.

  4. [ACM_模拟][ACM_暴力] Lazier Salesgirl [暴力 懒销售睡觉]

    Description Kochiya Sanae is a lazy girl who makes and sells bread. She is an expert at bread making ...

  5. DOS与Linux的换行字符

    一.vim打开window下的文件出现 ^M 首先理解,dos(windows)下建立的文件的换行是  ^M\$ (CRLF) ,而在Linux下面,仅仅是以 \$ (LF) 来做断行符号: (^M\ ...

  6. AngularJS快速入门指南10：DOM节点

    AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...

  7. js关于事件

    摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一 ...

  8. Web端测试和移动端测试的区别

    1.记录bug 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片,对于错误的地方可以用工具自带的标识来重点标记. 对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上,个人一般 ...

  9. javascript设计模式与开发实践阅读笔记（7）——迭代器模式

    迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  10. 今日例子border

    border这个属性在页面上的使用率还是很高,例如我们需要理解的盒模型就需要对border有个 比较深的理解,如果你会盒模型,但对border没有深的理解,那只能说你只是知道盒模型,而 不是懂得盒模型 ...