<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>
