PUI.Progress renders an accessible progressbar with configurable bounds and
labels.
Import
use PUI
# or
import PUI.Progress
Usage
<.progress value={45} label="Upload progress" />
<.progress value={3} min={0} max={10} value_text="3 of 10 items" />
Progress Bar
45%
heex
<div class="space-y-4 max-w-md">
<.progress value={@progress_value} />
<div class="flex items-center gap-3">
<input
type="range"
min="0"
max="100"
value={@progress_value}
phx-change="update_progress"
name="value"
class="flex-1"
/>
<span class="text-sm font-mono text-muted-foreground w-12 text-right">
{trunc(@progress_value)}%
</span>
</div>
</div>API Reference
| Name | Type | Default | Description |
|---|---|---|---|
min |
float |
0.0 |
Minimum progress value |
max |
float |
100.0 |
Maximum progress value |
value |
float |
0.0 |
Current progress value |
label |
string |
nil |
Accessible label |
aria_labelledby |
string |
nil |
ID of the labelling element |
value_text |
string |
nil |
Human-readable announced value |
class |
string |
"" |
Additional CSS classes |