Progress

Displays an indicator showing completion progress.

<script lang="ts">
  import { Progress } from "$lib/components/ui/progress";
  import { onMount } from "svelte";
 
  let value = $state(13);
 
  onMount(() => {
    const timer = setTimeout(() => (value = 66), 400);
    return () => clearTimeout(timer);
  });
</script>
 
<Progress {value} class="max-w-sm" />

Installation

npx lily-svelte@latest add progress

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the progress source from the registry into `$lib/components/ui/progress`.

Usage

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

← Popover Radio Group →