CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 06:50:49 +12:00
Code Issues Projects Releases Wiki Activity

wip: update ProgressCircle to take values

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 09:30:52 +02:00
parent 6ca0a46d45
commit 1b2a0e879b
1 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/bbui/src/ProgressCircle/ProgressCircle.svelte
View file

@ -4,10 +4,29 @@
import { tweened } from "svelte/motion"
import { cubicOut } from "svelte/easing"
export let value = false
export let small
export let large
export let value = false
export let minValue = 0
export let maxValue = 0
let subMask1Style
let subMask2Style
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)"
} else if (percentage > 50) {
angle = -180 + ((percentage - 50) / 50) * 180
subMask1Style = "rotate(0deg)"
subMask2Style = `rotate(${angle}deg)`
}
}
export let overBackground
</script>
@ -20,12 +39,12 @@
<div class="spectrum-ProgressCircle-track" />
<div class="spectrum-ProgressCircle-fills">
<div class="spectrum-ProgressCircle-fillMask1">
<div class="spectrum-ProgressCircle-fillSubMask1">
<div class="spectrum-ProgressCircle-fillSubMask1" style={subMask1Style}>
<div class="spectrum-ProgressCircle-fill" />
</div>
</div>
<div class="spectrum-ProgressCircle-fillMask2">
<div class="spectrum-ProgressCircle-fillSubMask2">
<div class="spectrum-ProgressCircle-fillSubMask2" style={subMask2Style}>
<div class="spectrum-ProgressCircle-fill" />
</div>
</div>