Progress
Visualizes the progress or completion status of a task or process.
<script lang="ts">
import { onMount } from "svelte";
import { Progress } from "$lib";
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-300 ease-linear"
style={`transform: translateX(-${
100 - (100 * (value ?? 0)) / (100 ?? 1)
}%)`}
/>
</Progress.Root>
<script lang="ts">
import { onMount } from "svelte";
import { Progress } from "$lib";
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-300 ease-linear"
style={`transform: translateX(-${
100 - (100 * (value ?? 0)) / (100 ?? 1)
}%)`}
/>
</Progress.Root>
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 |
|---|---|---|
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 |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| 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. |
🚧 UNDER CONSTRUCTION 🚧