Progress - shadcn-svelte

Docs

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%]" />

	<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

	npx  shadcn-svelte@latest add progress

Usage

	<script lang="ts">
  import { Progress } from "$lib/components/ui/progress";
</script>
 
<Progress value={33} />

Popover Radio Group

On This Page