如何實現(xiàn)可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條-創(chuàng)新互聯(lián)
這篇文章主要講解了“如何實現(xiàn)可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實現(xiàn)可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條”吧！
一款進(jìn)度條，它的外觀是一條直線，末端有個小球，在進(jìn)度變化時可以顯示數(shù)字百分比，更可以用不同顏色來表示當(dāng)前進(jìn)度的狀態(tài)。來看看效果圖。
接下來我們來分析一下這款HTML5進(jìn)度條的實現(xiàn)源碼，篇幅有限，我們只挑核心的代碼來說。
HTML代碼很簡單，構(gòu)造一個進(jìn)度條容器和數(shù)字百分比容器：
代碼如下:
首先我們來對進(jìn)度條的容器進(jìn)行樣式渲染，利用CSS3的漸變屬性來實現(xiàn)不同進(jìn)度變換顏色的效果：
代碼如下:
.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;
}
.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, #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的漸變屬性。
然后是數(shù)字百分比的樣式屬性，這里隨著進(jìn)度變化，數(shù)字百分比的顏色也會發(fā)生變化。
代碼如下:
.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: "%";
}
最后，我們再來看看JS代碼，其實js要完成的工作非常簡單，只需要將CSS3渲染好的進(jìn)度條動起來就好，看代碼：
代碼如下:
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
});
感謝各位的閱讀，以上就是“如何實現(xiàn)可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何實現(xiàn)可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
本文題目：如何實現(xiàn)可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://m.jiaotiyi.com/article/ddjhpj.html