Elapsed
A clock counting up from a moment the server named, or down to one. Work that takes a minute and work that has hung look the same behind a spinner; a number that keeps moving is the difference.
Counting up
The server renders the current reading and the element keeps it moving, a second at a time.
- Started just now
4s - A slow tool
3m 5s - Probably hung
1h 4m 2s
<dl class="grid grid-cols-[auto_auto] gap-x-6 gap-y-2 text-sm">
<dt class="text-neutral-500">Started just now</dt>
<dd><%= elapsed_tag @now - 4 %></dd>
<dt class="text-neutral-500">A slow tool</dt>
<dd><%= elapsed_tag @now - 185 %></dd>
<dt class="text-neutral-500">Probably hung</dt>
<dd><%= elapsed_tag @now - 3842 %></dd>
</dl>Counting down
direction: :down stops at zero and fires unmagic-elapsed:end.
This link expires in
<p class="text-sm text-neutral-600 dark:text-neutral-400">
This link expires in <%= elapsed_tag @now + 45, direction: :down, class: "font-semibold text-neutral-900 dark:text-neutral-100" %>.
</p>