Progress

The Progress component displays the completion status of a task or operation, helping users understand how much of a task has been completed and how much is left.

Usage

<script>
  import { Progress } from "$lib/components/ui/progress";
  
  let value = 40;
</script>

<Progress {value} />

Examples

Basic Progress

A simple progress indicator with a default style.

With Custom Value

A progress bar with a specific completion value.

Completion: 75%

Indeterminate Progress

A progress indicator that doesn't specify a value, useful for loading states where progress is unknown.

With Custom Max Value

A progress bar with a custom maximum value.

Value: 30/50 (60%)

Custom Height and Width

Customizing the dimensions of the progress bar.

API Reference

Progress Properties

Property	Type	Default	Description
`value`	`number`	`undefined`	The current progress value.
`max`	`number`	`100`	The maximum value for the progress bar.
`class`	`string`	`undefined`	Custom CSS classes.
`ref`	`HTMLDivElement`	`undefined`	A reference to the underlying HTML element.

Implementation

The Progress component is built on top of the bits-ui primitives and uses Tailwind CSS for styling:

<script lang="ts">
	import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
	import { cn } from "$lib/utils.js";

	let {
		ref = $bindable(null),
		class: className,
		max = 100,
		value,
		...restProps
	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
</script>

<ProgressPrimitive.Root
	bind:ref
	{value}
	class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
	{...restProps}
>
	<div
		class="bg-primary h-full w-full flex-1 transition-all"
		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
	></div>
</ProgressPrimitive.Root>

The component is designed with accessibility in mind, using appropriate ARIA attributes for better screen reader support. The progress is visually represented by a filled bar that grows from left to right as the value increases.