mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-04-23 06:15:19 +02:00
25 lines
732 B
Svelte
25 lines
732 B
Svelte
<script lang="ts">
|
|
import {Progress as ProgressPrimitive, type WithoutChildrenOrChild} from "bits-ui";
|
|
import {cn} from "$lib/utils.js";
|
|
|
|
let {
|
|
ref = $bindable(null),
|
|
class: className,
|
|
max = 100,
|
|
value,
|
|
...restProps
|
|
}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
|
|
</script>
|
|
|
|
<ProgressPrimitive.Root
|
|
{...restProps}
|
|
bind:ref
|
|
class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
|
|
{value}
|
|
>
|
|
<div
|
|
class="bg-primary h-full w-full flex-1 transition-all"
|
|
style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
|
|
></div>
|
|
</ProgressPrimitive.Root>
|