Docs
Progress
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Loading...
<script lang="ts">
import { onMount } from "svelte";
import { Progress } from "$lib/components/ui/progress/index.js";
let value = 13;
onMount(() => {
const timer = setTimeout(() => (value = 66), 500);
return () => clearTimeout(timer);
});
</script>
<Progress {value} max={100} class="w-[60%]" />
<script lang="ts">
import { onMount } from "svelte";
import { Progress } from "$lib/components/ui/progress/index.js";
let value = 13;
onMount(() => {
const timer = setTimeout(() => (value = 66), 500);
return () => clearTimeout(timer);
});
</script>
<Progress {value} max={100} class="w-[60%]" />
Installation
npx shadcn-svelte@latest add progress
Usage
<script lang="ts">
import { Progress } from "$lib/components/ui/progress";
</script>
<Progress value={33} />
On This Page