22 lines
420 B
Svelte
22 lines
420 B
Svelte
<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>
|