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彩色进度条,布布扣,bubuko.com

css3彩色进度条

上一篇:《大型网站技术架构》读书笔记[3] - 架构核心五要素


下一篇:妙味云课堂之css:兼容的那些事