CODEWITHSUNDEEP
csssass
Hildy Maass
Hildy Maass

Reputation: 97

css radial progress bar increment of 1 percent

I found a sleek Pure CSS knob on codepen, but it only produces classes for percentages for multiples of 5 (eg. 5%, 10%, 20%, etc.).

http://codepen.io/brewing/pen/Imxpc 

$barColor: tomato
$overlayColor: #fffde8
$backColor: #2f3439

$step: 5 // step of % for created classes

$loops: round(100 / $step)
$increment: round(360 / $loops)
$half: round($loops / 2)
@for $i from 0 through $loops
  .progress-#{$i*$step}
    @if $i < $half
      $nextdeg: 90deg + ( $increment * $i )
      background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
    @else
      $nextdeg: -90deg + ( $increment * ( $i - $half ) )
      background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)

The last 3 classes generated look like this:

.progress-90 {
  background-image: linear-gradient(54deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(72deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(90deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

But when I try to change it to produce classes for all of the percentages from 0 through 100, the classes end up having the wrong angle for the first gradient:

.progress-90 {
  background-image: linear-gradient(70deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-95 {
  background-image: linear-gradient(90deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

.progress-100 {
  background-image: linear-gradient(110deg, tomato 50%, transparent 50%, transparent), linear-gradient(270deg, tomato 50%, #2f3439 50%, #2f3439);
}

Upvotes: 0

Views: 1177

Answers (1)

vals
vals

Reputation: 64224

The problem arise because it is using integer arithmetic.

When you want 1% step, that turns into $increment = 3.6 degrees. It gets rounded to 4, and that causes the problem.

Change the calculus so it doesn't uses increment, but the original calculus for it:

@if $i < $half
    $nextdeg: 90deg + ( 360 * $i / $loops )
    background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor)
@else
    $nextdeg: -90deg + ( 360 * ( $i - $half ) / $loops )
    background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor)

Notice that the only change is replacing $increment for the formula to calculate it

demo

Upvotes: 1

Related Questions