进度条

标签：

以这个进度条为例，在加上一个显示的数据

<div class="loader-container">
　　<div class="meter">0</div>  <!-- 数字，显示当前的进度百分比 -->

　　<span class="runner"></span> 

</div>

css代码为：

.loader-container {
    height: 10px;
    width: 1030px;
    position: relative;
    top: 472px;
    left:-5px;
    margin-top: -3px;
    margin-left: -5px;
    background-color: transparent;
    background-image: -webkit-linear-gradient(left, #ff66ff, #6699ff);
    background-image: -moz-linear-gradient(left, #ff66ff, #6699ff);
    background-image: -o-linear-gradient(left, #ff66ff, #6699ff);
    background-image: -ms-linear-gradient(left, #ff66ff, #6699ff);
    background-image: linear-gradient(left, #ff66ff, #6699ff);
    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
}
.run .runner {
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 0%;
    background-color: transparent;
    background-image: -webkit-linear-gradient(top,#999999, #cccccc);
    background-image: -moz-linear-gradient(top, #999999, #cccccc);
    background-image: -o-linear-gradient(top,#999999, #cccccc);
    background-image: -ms-linear-gradient(top, #999999, #cccccc);
    background-image: linear-gradient(top, #999999, #cccccc);
    animation: loader 10s linear;
}
@keyframes loader {
    0% {
        width: 100%;
    }
    100% {
        width: 0%;
    }
}
/* 进度百分比 */

.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: "%";
}

@keyframes meter {
　　0% {
　　　　color: #5bd8ff;
　　}
　　100% {
　　　　color: #ff0000;
　　}
}

js代码：

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({
　　time: 10000  //设定的时间，以毫秒为单位
});

进度条

标签：

原文地址：http://www.cnblogs.com/liulan/p/5435851.html