Radial progress bar counter-clockwise direction

Question

I am trying to use pure CSS to make radial progress bar with the background gradient. Depending on the class we provide .progress-47 or .progress-90, the Sass for loop changes the behavior of our radial. I need to create the same effect but in counter-clockwise direction. The full code is available here in 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);
    }
  }
}

score 1 · Accepted Answer · edited May 23 '17 at 11:53

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.

Solution:

For changing the radial progress bar to counter clockwise direction, we just have to alter the gradient definitions. The angle of the gradient needs to be modified and the colors need to be switched like in the below code block:

@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 */
    }
  }
}

Explanation:

A complete explanation of how the gradients produce the radial progress bar is available in my answer here.

Demo: A demo is available here - CodePen Demo.

Radial progress bar counter-clockwise direction

1 Answers1