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