Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Local-first, open source apps
<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%]" />pnpm dlx shadcn-svelte@latest add progressnpx shadcn-svelte@latest add progressnpx shadcn-svelte@latest add progressbun x shadcn-svelte@latest add progressInstall bits-ui:
pnpm i bits-ui -Dnpm i bits-ui -Dyarn install bits-ui -Dbun install 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 } from "$lib/components/ui/progress/index.js";
</script><Progress value={33} />Use a Field component to add a label to the progress bar.
<script lang="ts">
import * as Field from "$lib/components/ui/field/index.js";
import { Progress } from "$lib/components/ui/progress/index.js";
</script>
<Field.Field class="w-full max-w-sm">
<Field.Label for="progress-upload" class="w-full">
<span>Upload progress</span>
<span class="ml-auto font-normal text-muted-foreground tabular-nums">56%</span>
</Field.Label>
<Progress value={56} id="progress-upload" />
</Field.Field>A progress bar that can be controlled by a slider.
<script lang="ts">
import { Progress } from "$lib/components/ui/progress/index.js";
import { Slider } from "$lib/components/ui/slider/index.js";
let value = $state(50);
</script>
<div class="flex w-full max-w-sm flex-col gap-4">
<Progress {value} />
<Slider type="single" bind:value min={0} max={100} step={1} />
</div>