Progress

<script lang="ts">
	import { Progress } from 'radix-svelte';
	import type { ResolvedProps } from 'radix-svelte/internal/helpers';

	let rootValue: number = 40;
	let rootMax: number = 100;
</script>

<form class="grid h-full place-items-center">
	<div class="flex items-center justify-center">
		<Progress.Root
			class="relative h-6 w-[300px] overflow-hidden rounded-[99999px] bg-black/40"
			value={rootValue}
			max={rootMax}
			id="c1"
		>
			<Progress.Indicator
				class="h-full w-full bg-[white] transition-transform duration-[660ms] ease-[cubic-bezier(0.65,0,0.35,1)]"
				style={`transform: translateX(-${
					100 - (100 * (rootValue ?? 0)) / (rootMax ?? 1)
				}%)`}
			/>
		</Progress.Root>
	</div>
</form>