Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
<script lang="ts">
import { onMount } from "svelte";
import { Progress } from "$lib/components/ui/progress/index.js";
let value = $state(13);
onMount(() => {
const timer = setTimeout(() => (value = 66), 500);
return () => clearTimeout(timer);
});
</script>
<Progress {value} max={100} class="w-[60%]" />Installation
pnpm dlx shadcn-svelte@latest add progressInstall bits-ui:
pnpm add bits-ui -DCopy and paste the following code into your project.
import Root from './progress.svelte';
export {
Root,
//
Root as Progress
};
<script lang="ts">
import { Progress as ProgressPrimitive } from 'bits-ui';
import { cn, type WithoutChildrenOrChild } from '$UTILS$.js';
let {
ref = $bindable(null),
class: className,
max = 100,
value,
...restProps
}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
</script>
<ProgressPrimitive.Root
bind:ref
data-slot="progress"
class={cn(
'bg-zinc-800 h-px rounded-none relative flex w-full items-center overflow-x-hidden',
className
)}
{value}
{max}
{...restProps}
>
<div
data-slot="progress-indicator"
class="bg-[#d0e891] size-full flex-1 transition-all"
style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
></div>
</ProgressPrimitive.Root>
Usage
<script lang="ts">
import { Progress } from '$lib/components/ui/progress/index.js';
</script><Progress value={33} />