44 lines
987 B
Svelte
44 lines
987 B
Svelte
<script lang="ts">
|
|
export let frame: number;
|
|
export let fps: number;
|
|
|
|
let el: SVGSVGElement;
|
|
$: center = el?.clientWidth / 2;
|
|
$: radius = center;
|
|
let d = '';
|
|
let circleOpacity = 1;
|
|
|
|
$: {
|
|
const angle = ((frame / fps) * 360) % 360;
|
|
const radians = (angle * Math.PI) / 180;
|
|
const x = center + radius * Math.cos(radians);
|
|
const y = center + radius * Math.sin(radians);
|
|
d = `M${center},${center} L${center + radius},${center} A${radius},${radius} 0 ${angle > 180 ? 1 : 0} 1 ${x},${y} Z`;
|
|
|
|
const flashFrames = fps / 10;
|
|
circleOpacity = (flashFrames - (frame % fps)) / flashFrames;
|
|
}
|
|
</script>
|
|
|
|
<svg class="indicator" style="--circle-opacity: {circleOpacity}" bind:this={el}>
|
|
<circle cx={center} cy={center} r={radius}></circle>
|
|
<path {d}></path>
|
|
</svg>
|
|
|
|
<style>
|
|
.indicator {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
circle {
|
|
fill: var(--color-active);
|
|
opacity: var(--circle-opacity);
|
|
}
|
|
|
|
path {
|
|
fill: var(--color-inactive);
|
|
}
|
|
</style>
|