Progress
A visual indicator that displays the progress of a task, usually in the form of a progress bar.
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
Root
The progress bar component.
| Prop | Default | Type/Description |
|---|---|---|
asChild | false | boolean Whether to use render delegation with this component or not. |
max | 100 | number The maximum value of the progress bar. Used to calculate the percentage of the progress bar. |
value | 0 | number The current value of the progress bar. |
onValueChange | - | (value: number) => void A callback that fires when the value changes. |
| Data Attribute | Value/Description |
|---|---|
data-value | The current value of the progress bar. |
data-state | 'indeterminate' | 'complete' | 'loading' The current state of the progress bar. |
data-max | The maximum value of the progress bar. |
🚧 UNDER CONSTRUCTION 🚧