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 = 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 ?? 1)}%)`}
  />
</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
onValueChange
function

A callback that fires when the value changes.

Default: undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

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.