Browse Source

fix progress not showing correctly

pull/1447/head
Keviin Åberg Kultalahti 5 years ago
parent
commit
91518bdef8
  1. 13
      packages/bbui/src/ProgressCircle/ProgressCircle.svelte

13
packages/bbui/src/ProgressCircle/ProgressCircle.svelte

@ -9,21 +9,21 @@
export let value = false
export let minValue = 0
export let maxValue = 0
export let maxValue = 100
let subMask1Style
let subMask2Style
if (!value) {
if (value) {
let percentage = ((value - minValue) / (maxValue - minValue)) * 100
let angle
if (percentage > 0 && percentage <= 50) {
angle = -180 + (percentage / 50) * 180
subMask1Style = `rotate(${angle}deg)`
subMask2Style = "rotate(-180deg)"
subMask1Style = `transform: rotate(${angle}deg);`
subMask2Style = "transform: rotate(-180deg);"
} else if (percentage > 50) {
angle = -180 + ((percentage - 50) / 50) * 180
subMask1Style = "rotate(0deg)"
subMask2Style = `rotate(${angle}deg)`
subMask1Style = "transform: rotate(0deg);"
subMask2Style = `transform: rotate(${angle}deg);`
}
}
@ -34,6 +34,7 @@
class:spectrum-ProgressBar--indeterminate={!value}
class:spectrum-ProgressCircle--small={small}
class:spectrum-ProgressCircle--large={large}
class:spectrum-ProgressCircle--overBackground={overBackground}
class="spectrum-ProgressCircle"
>
<div class="spectrum-ProgressCircle-track" />

Loading…
Cancel
Save