css径向进度条增量为1％

Question

我在codepen上找到了一个圆滑的纯CSS旋钮，但它只生成5的倍数（例如5％，10％，20％等）的百分比类别。

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) 

最后3类生成这个样子：

.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); 
} 

但是，当我试图改变它通过100产生类全部为0的百分比，类最终出现第一梯度的错误角度：

.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); 
} 

Answer 1

T他出现问题是因为它使用整数算术。

当你想要1％的步骤，这将变成$增量= 3.6度。它四舍五入到4，并导致问题。

更改了微积分，因此不会采用增量，但原来的算盘是：

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

注意，唯一的变化是更换$增量公式来计算的话

demo