Радиальная полоса хода против часовой стрелки

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.

---

Demo: Демо можно посмотреть здесь - CodePen Demo.