Progress

A visual indicator showing the completion status of a task.

<script lang="ts">
import { Progress } from "coss-svelte";
</script>

<Progress value={20} />

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Import the Svelte component exports directly from the package.

import { Progress } from "coss-svelte";

Progress exposes a single component export for the current implementation.

A visual indicator showing the completion status of a task.

Prop	Type	Default	Description
`value`	`number \| null`	`45`	Current value for the component. Bind with `bind:value` when supported.
`min`	`number`	`0`	Minimum value for the control.
`max`	`number`	`100`	Maximum value for the control.
`label`	`string`	`""`	Accessible label or fallback visible label for the control.

children : Snippet<[]>bind:ref : HTMLElement | null