<script lang="ts">
	interface Props {
		progress: number;
	}

	let { progress }: Props = $props();
</script>

<div
	class="fixed top-0 left-0 right-0 z-50 h-1 bg-muted"
	role="progressbar"
	aria-valuenow={Math.round(progress)}
	aria-valuemin={0}
	aria-valuemax={100}
	aria-label="Reading progress"
>
	<div
		class="h-full bg-primary transition-[width] duration-150 ease-out"
		style="width: {progress}%"
	></div>
</div>
