径向进度条逆时针方向

Question

我想用纯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); 
    } 
    } 
} 

Answer 1

我会强烈反对使用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。