n/250kb-club
1
0
Fork 0
mirror of https://github.com/nkoehring/250kb-club.git synced 2025-04-19 13:49:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

a gauge

Browse source
This commit is contained in:
koehr 2020-12-08 23:24:12 +01:00
parent cfb09edbde
commit de9d6d2b80
1 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/Gauge.svelte Normal file
View file

@ -0,0 +1,44 @@
<script>
const radius = 40
const dashes = 2 * Math.PI * radius
export let max = 100
export let value = 1
$: offset = dashes * value / max * -1
</script>
<div class="gauge-box">
<svg viewBox="0 0 100 100" class="gauge">
<circle class="dial" cx="50" cy="50" r={radius} />
<circle class="dial value" cx="50" cy="50" r={radius}
stroke-dasharray={dashes}
stroke-dashoffset={offset}
/>
<circle class="dial value2" cx="50" cy="50" r={radius}
stroke-dasharray={dashes}
stroke-dashoffset={offset*1.2}
/>
</svg>
</div>
<style>
.gauge-box {
width: 60px;
height: 60px;
margin-top: -10px;
}
.gauge {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.dial {
fill: none;
stroke: #333;
stroke-width: 4;
}
.value { stroke: green; }
.value2 { stroke: yellow; }
</style>