34 lines
635 B
Svelte
34 lines
635 B
Svelte
<script lang="ts">
|
|
export let frame: number;
|
|
export let fps: number;
|
|
|
|
let el: SVGSVGElement;
|
|
$: center = el?.clientWidth / 2;
|
|
$: radius = center;
|
|
|
|
let opacity = 1;
|
|
$: opacity = ease(1 - ((frame % fps) / fps) * 2);
|
|
|
|
function ease(x: number) {
|
|
x = Math.max(0, Math.min(1, x));
|
|
return 1 - Math.cos((x * Math.PI) / 2);
|
|
}
|
|
</script>
|
|
|
|
<svg class="indicator" bind:this={el} style="--opacity: {opacity}">
|
|
<circle cx={center} cy={center} r={radius}></circle>
|
|
</svg>
|
|
|
|
<style>
|
|
.indicator {
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
circle {
|
|
fill: var(--color-active);
|
|
opacity: var(--opacity);
|
|
}
|
|
</style>
|