Progress

A visual indicator that displays the progress of a task, usually in the form of a progress bar.

	<script lang="ts">
  import { onMount } from "svelte";
  import * as Progress from "@/components//ui/progress";
 
  let value = 13;
  onMount(() => {
    const timer = setTimeout(() => (value = 66), 500);
    return () => clearTimeout(timer);
  });
</script>
 
<Progress.Root {value} max={100} class="w-[60%]" />

	<script lang="ts">
  import { onMount } from "svelte";
  import * as Progress from "@/components//ui/progress";
 
  let value = 13;
  onMount(() => {
    const timer = setTimeout(() => (value = 66), 500);
    return () => clearTimeout(timer);
  });
</script>
 
<Progress.Root {value} max={100} class="w-[60%]" />

Structure

	<script lang="ts">
  import { Progress } from "bits-ui";
</script>
 
<Progress.Root />

	<script lang="ts">
  import { Progress } from "bits-ui";
</script>
 
<Progress.Root />

Component API

Progress.Root

The progress bar component.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`max`	`number`	The maximum value of the progress bar. Used to calculate the percentage of the progress bar. `Default: 100`
`value`	`number`	The current value of the progress bar. `Default: 0`
`onValueChange`	`(value: number) => void`	A callback that fires when the value changes. `Default: undefined`

Data Attribute	Value/Description
`data-value`	The current value of the progress bar. `Value: ''`
`data-state`	The current state of the progress bar. `Value: 'indeterminate' \| 'complete' \| 'loading'`
`data-max`	The maximum value of the progress bar. `Value: ''`

🚧 UNDER CONSTRUCTION 🚧