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
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 | Description/Value |
|---|---|
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 🚧