径向进度条逆时针方向

Question

我正在尝试使用纯 CSS 制作带有背景渐变的径向进度条。根据我们提供的 class 或 .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

I would strongly discourage using CSS for generating this radial progress bar. SVG is the best tool for such stuff. With CSS, even though it is possible, it is a lot of work and a lot of classes.

解法：

要将径向进度条更改为逆时针方向，我们只需更改渐变定义即可。渐变的角度需要修改，颜色需要像下面的代码块一样切换：

@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.

径向进度条逆时针方向

Radial progress bar counter-clockwise direction

html

css

linear-gradients

progress-bar