html⼀条线两种颜⾊,HTML5CSS3超酷进度条不同进度多种颜
⾊
本⽂作者html5tricks，转载请注明出处
这是⼀款线条状的
下⾯我们来看看实现这款进度条的过程和源码，代码主要由HTML、CSS以及jQuery组成，实现过程也相对⽐较简单。
HTML代码：
这⾥定义了进度条的容器，以及进度百分⽐。
CSS代码：
.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: -o-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;
}
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, #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);
}
.
loader-container.done:after {
background: Red;
}
jquery下载文件进度条
.run .runner {
content: "";
position: absolute;
right: 0;
height: 100%;
width: 0%;
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); animation: loader 10s linear;
系统软件unix}
position: absolute;
top: 0;
right: 0;
font-size: 2em;
margin-top: .3em;
color: #ff0000;
animation: meter 10s linear;
text-shadow: 0 -1px 0 #333333;
}
actionlistener 鼠标单击.meter:after {
content: "%";
}
@keyframes loader {
0% {
width: 100%;
}
100% {
distinct短语搭配
width: 0%;
}
}
@keyframes meter {
0% {
color: #5bd8ff;
}
100% {
color: #ff0000;
}
}
这⾥利⽤了CSS3的动画属性，定义了从0%到100%的动画效果。jQuery代码：
var Loader = function () {
var loader = document.querySelector('.loader-container'), meter = document.querySelector('.meter'),
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;
vb编程设计例题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
});
⽤jQuery代码实现了进度条的实时更新，并且百分⽐数字也实时更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。