Progress
StorybookDisplays an indicator showing the completion progress of a task. Demonstrated in all 3 state modes plus indeterminate.
Client-only Progress
No server events. Vanilla JS buttons update the progress bar via CustomEvent — zero latency.
Indeterminate
When no value is set, the progress bar shows an indeterminate animation — useful for loading states where completion is unknown.
Hybrid
JS updates instantly for responsiveness, then pushes the event to the server. The event log below updates via LiveView.
Server-controlled
The server owns the state. Use the buttons below to control the progress externally.
33%
Push Event (Server → Client)
The server pushes commands to a client-mode progress bar via push_event/3. The progress has no value or on_value_change — it's client-only, but the server can still command it.