馅饼加载器 2 种进度颜色,css、html、javascript
Pie loader 2 progress colors, css, html, javascript
我几乎完成了使用 ReactJS 的超时计时器。它应该看起来像一个馅饼加载器,我需要在最后 30% 的进度中将颜色从绿色变为黄色。
作为计时器的模板,我使用了 http://jsfiddle.net/Aw5Rf/7/ 这个。
<div class="pie" data-percent="22">
<div class="left">
<span></span>
</div>
<div class="right">
<span></span>
</div>
</div>
一种简单的可能性是根据进度添加和删除 class:
http://jsfiddle.net/Aw5Rf/139/
javascript:
$(".pie").each(function() {
var percent = $(this).data("percent"),
$left = $(this).find(".left span"),
$right = $(this).find(".right span"),
deg;
if(percent >= 70) {
this.classList.add("pie-almostComplete");
} else {
this.classList.remove("pie-almostComplete");
}
...
}
css:
.pie-almostComplete {
background-color: rgb(255, 207, 51);
}
我几乎完成了使用 ReactJS 的超时计时器。它应该看起来像一个馅饼加载器,我需要在最后 30% 的进度中将颜色从绿色变为黄色。
作为计时器的模板,我使用了 http://jsfiddle.net/Aw5Rf/7/ 这个。
<div class="pie" data-percent="22">
<div class="left">
<span></span>
</div>
<div class="right">
<span></span>
</div>
</div>
一种简单的可能性是根据进度添加和删除 class:
http://jsfiddle.net/Aw5Rf/139/
javascript:
$(".pie").each(function() {
var percent = $(this).data("percent"),
$left = $(this).find(".left span"),
$right = $(this).find(".right span"),
deg;
if(percent >= 70) {
this.classList.add("pie-almostComplete");
} else {
this.classList.remove("pie-almostComplete");
}
...
}
css:
.pie-almostComplete {
background-color: rgb(255, 207, 51);
}