HEEx
<div class="w-sm">
<ConnieUI.Progress.progress_bar_base value={30} min={0} max={120} percentage={25.0} />
</div>
Variant matrix
Every combination of one or two attributes, side by side.
Controls
Set by the example
class
Docs
The bar itself.
`animated` decides who moves it. Unanimated, the server writes the fill's
transform inline, which is right for a value that changes when a person does
something. Animated, the browser writes it: the server only states the target, and
the element eases towards it.
That distinction matters for a bar driven by a stream of updates. Patching an
inline transform restarts the transition from wherever it had got to, dozens of
times a second, which reads as blinking and stuttering rather than motion. Letting
the element own the transform means one continuous animation that simply retargets,
however often or unevenly the updates arrive.
| Attribute | Type | Default | Description |
|---|---|---|---|
| No data found. | |||
| value * | :integer |
|
|
| min * | :integer |
|
|
| max * | :integer |
|
|
| percentage * | :float |
|
|
| animated | :boolean | false |
|
| class | :any | nil |
|
| rest | :global |
|
|