我正在尝试使用纯CSS来使径向进度条具有背景渐变。根据我们提供的.progress-47
或.progress-90
的类,Sass for循环会更改径向的行为。我需要创建相同的效果,但要沿逆时针方向。完整的代码位于CodePen中。
<div class="item progress-47">
<div class="radial-inner-bg"><span>47%</span></div>
</div>
<div class="item progress-33">
<div class="radial-inner-bg"><span>3/3</span></div>
</div>
<div class="item progress-95">
<div class="radial-inner-bg"><span>95%</span></div>
</div>
<div class="item progress-85">
<div class="radial-inner-bg"><span>85%</span></div>
</div>
$step: 1; // step of % for created classes
$loops: 100;
$increment: (360 / $loops);
$half: round($loops / 2);
@for $i from 0 through $loops {
.progress-#{$i*$step} {
@if $i < 50 {
$nextdeg: 90deg + ( $increment * $i );
background-image: linear-gradient(90deg, $light-gray 50%, transparent 50%, transparent), linear-gradient($nextdeg, $medium-yellow 50%, $light-gray 50%, $light-gray);
}
@else {
$nextdeg: -90deg + ( $increment * ( $i - $half ) );
background-image: linear-gradient($nextdeg, $medium-yellow 50%, transparent 50%, transparent), linear-gradient(270deg, $medium-yellow 50%, $light-gray 50%, $light-gray);
}
}
}
最佳答案
我强烈不建议使用CSS来生成此径向进度条。 SVG是处理此类问题的最佳工具。使用CSS,即使有可能,也需要大量工作和大量类。
解:
为了将径向进度条更改为逆时针方向,我们只需要更改渐变定义即可。像下面的代码块中一样,需要修改渐变的角度并且需要切换颜色:
@for $i from 0 through $loops {
.progress-#{$i*$step} {
@if $i < 50 {
$nextdeg: 90deg - ( $increment * $i ); /* angle modified */
background-image: linear-gradient(90deg, transparent 50%, $light-gray 50%), linear-gradient($nextdeg, $light-gray 50%, $medium-yellow 50%); /* colors switched */
}
@else {
$nextdeg: -90deg - ( $increment * ( $i - $half ) ); /* angle modified */
background-image: linear-gradient($nextdeg, transparent 50%, $medium-yellow 50%), linear-gradient(270deg, $light-gray 50%, $medium-yellow 50%); /* colors switched */
}
}
}
说明:
my answer here中提供了有关梯度如何产生径向进度条的完整说明。
演示:此处提供演示-CodePen Demo。
关于html - 径向进度条逆时针方向,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40697777/