MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix progress not showing correctly

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 09:43:01 +02:00
parent 1b2a0e879b
commit b9ec7568d8
1 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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