Catalog Progress

<.progress_bar_base>

ConnieUI.Progress

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

:integer
:integer
:integer
:float

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
value * :integer
min * :integer
max * :integer
percentage * :float
animated :boolean false
class :any nil
rest :global