Progress
A bar filled to a fraction of the way, in a tone and a size, or sweeping while the size of the job is still unknown.
<div class="grid max-w-md gap-4">
<%= progress 42, label: "Uploading" %>
<%= progress 3, max: 8, tone: :good, label: "Renders finished" %>
<%= progress 88, tone: :warn, label: "Disk used" %>
<%= progress 100, tone: :bad, label: "Quota", size: :small %>
<%= progress 60, tone: :info, label: "Downloading", size: :large %>
</div>Indeterminate
With no value the bar sweeps; under reduced motion it pulses in place.
<div class="max-w-md">
<%= progress indeterminate: true, label: "Preparing the archive" %>
</div>