Report an issue

Progress

Visualizes the progress or completion status of a task or process.

	<script lang="ts">
  import { Progress } from "bits-ui";
  import { onMount } from "svelte";
 
  let value = $state(13);
 
  onMount(() => {
    const timer = setTimeout(() => (value = 66), 500);
    return () => clearTimeout(timer);
  });
</script>
 
<Progress.Root
  {value}
  max={100}
  class="relative h-[15px] w-[60%] overflow-hidden rounded-full bg-dark-10 shadow-mini-inset"
>
  <div
    class="h-full w-full flex-1 rounded-full bg-foreground shadow-mini-inset transition-all duration-1000 ease-in-out"
    style={`transform: translateX(-${100 - (100 * (value ?? 0)) / 100}%)`}
  ></div>
</Progress.Root>

Structure

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

API Reference

Progress.Root

The progress bar component.

Property Type Description
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
ref bindable prop
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See delegation docs for more information.

Default: undefined
Data Attribute Value Description
data-value
''

The current value of the progress bar.

data-state
enum

The current state of the progress bar.

data-max
''

The maximum value of the progress bar.

data-progress-root
''

Present on the root element.