能够随进度显示信息不一样色调的css3进度条共享

日期:2021-03-08 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

1款进度条,它的外型是1条平行线,尾端有个小球,在进度转变时能够显示信息数据百分比,更能够用不一样色调来表明当今进度的情况。看来看实际效果图。



接下来大家来剖析1下这款HTML5进度条的完成源代码,篇数比较有限,大家只挑关键的编码来讲。

HTML编码很简易,结构1个进度条器皿和数据百分比器皿:


拷贝编码
编码以下:

<div id="wrapper">
<div class="loader-container">
<div class="meter">0</div>
<span class="runner"></span>
</div>
</div>

最先大家来对进度条的器皿开展款式3D渲染,运用CSS3的渐变色特性来完成不一样进度转换色调的实际效果:

拷贝编码
编码以下:

.loader-container {
height: 6px;
width: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: ⑶px;
margin-left: ⑶00px;
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 ⑵px 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: ⑴em;
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;
}
.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;
}

这里也是运用的CSS3的渐变色特性。

随后是数据百分比的款式特性,这里伴随着进度转变,数据百分比的色调也会产生转变。


拷贝编码
编码以下:

.meter {
position: absolute;
top: 0;
right: 0;
font-size: 2em;
margin-top: .3em;
color: #ff0000;
animation: meter 10s linear;
text-shadow: 0 ⑴px 0 #333333;
}
.meter:after {
content: "%";
}

最终,大家再看来看JS编码,实际上js要进行的工作中十分简易,只必须将CSS33D渲染好的进度条动起来就好,看编码:

拷贝编码
编码以下:

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
});


源代码装包免费下载详细地址:http://xiazai.jb51.net/201403/tools/css3jdt.rar