Progress
Shows how much of a task is complete with a horizontal bar. The value can come fixed from the server or be bound to an Alpine expression that changes in the browser.
Basic usage
value takes a percentage between 0 and 100; values outside the range are clamped. label is not visible and is read only by screen readers (default "Progress", in the app language); if you need a visible heading, write it above the bar yourself.
<div class="space-y-1.5">
<div class="flex justify-between text-sm">
<span class="font-medium text-gray-900 dark:text-zinc-100">Sales target</span>
<span class="tabular-nums">68%</span>
</div>
<acun:progress :value="68" label="Sales target" />
</div>| Prop | Values |
|---|---|
value | 0 – 100 (percent) |
label | Screen reader label |
Sizes
The thickness of the bar is chosen with size; the default is md. sm suits cards and table rows, lg the main progress indicator of a page.
<div class="space-y-4">
<acun:progress :value="40" size="sm" />
<acun:progress :value="55" />
<acun:progress :value="70" size="lg" />
</div>| Prop | Values |
|---|---|
size | sm | md | lg |
Colors
The color of the bar is chosen with color, using the same palette names as buttons; the default is primary. To change the color by fill level, choose the value on the server (e.g. danger above 90%).
<div class="space-y-3">
<acun:progress :value="70" />
<acun:progress :value="60" color="success" />
<acun:progress :value="50" color="info" />
<acun:progress :value="40" color="warning" />
<acun:progress :value="30" color="danger" />
<acun:progress :value="20" color="secondary" />
<acun:progress :value="10" color="dark" />
</div>| Prop | Values |
|---|---|
color | primary | secondary | success | danger | warning | info | dark |
Striped and animated
striped adds diagonal stripes to the filled part; animated also adds the stripes and moves them, signaling that the work is ongoing. The animation stops for users who prefer reduced motion.
<div class="space-y-4">
<acun:progress :value="45" size="lg" striped />
<acun:progress :value="80" size="lg" animated />
</div>| Prop | Values |
|---|---|
striped | true | false |
animated | true | false (turns on the stripes as well) |
With Alpine
alpine takes an Alpine expression; the width of the bar and aria-valuenow follow this expression. Because the value changes in the browser, the page does not reload. This value is not clamped; keeping it between 0 and 100 is up to you.
<div class="space-y-3" x-data="{ percent: 30 }">
<acun:progress alpine="percent" label="Import" />
<div class="flex items-center gap-2">
<acun:button variant="white" size="sm" x-on:click="percent = Math.max(0, percent - 10)">−10</acun:button>
<acun:button variant="white" size="sm" x-on:click="percent = Math.min(100, percent + 10)">+10</acun:button>
<span class="text-sm tabular-nums" x-text="percent + '%'"></span>
</div>
</div>| Prop | Values |
|---|---|
alpine | Alpine expression (e.g. percent, file.progress) |
File upload progress
Livewire emits the livewire-upload-progress event while uploading a file. Write the percentage from the event to an Alpine variable and bind it to the bar with alpine.
<div x-data="{ upload: 0 }"
x-on:livewire-upload-start="upload = 0"
x-on:livewire-upload-progress="upload = $event.detail.progress">
<input type="file" wire:model="document">
<acun:progress alpine="upload" label="Uploading the document" class="mt-2" />
</div>Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
value | null | 0 – 100; clamped and converted to an integer |
alpine | null | Alpine expression; when given, it is used instead of value |
label | null | Screen reader label; when empty, "Progress" (in the app language) |
size | md | sm · md · lg |
striped | false | Diagonal stripes |
animated | false | Moving stripes (turns on striped as well) |