AHA demos
← All demos

Progress bar

Start a slow job on the server and watch it progress. Reload halfway through: the bar picks up where it was, because the job lives on the server.

Nothing running.

What to look at

This is "load polling". While the job runs, the fragment has hx-trigger="load delay:500ms" and hx-swap="outerHTML". Half a second after it appears, it replaces itself with a fresh copy from the server. That copy does the same. And so on.

When the job is done, the server returns a fragment without the trigger. The polling stops because there is nothing left to poll. No timers to clear, no state to track.

The inner bar has a stable id. htmx notices that and lets the CSS transition on width run between swaps, so the bar slides instead of jumping.

The job itself is just a timestamp in D1. Progress is how much of 6 seconds has passed. Any browser with your cookie sees the same bar.

Source

Loading source…

Every file of this demo, as it runs. Or browse it on GitHub ↗