Mockup meter
A labelled progress bar in a sequenced mock-up, whose width and caption follow the loop as it plays.
Growing with the loop
percent and caption are Alpine expressions over the step
counter of the nearest sequenced koala-mockup, so the bar grows and the caption names the
current stage as the loop plays. This is the progress card on the Legal home phone. Under reduced
motion the loop jumps to the end and the bar shows full.
Several sales
Stack meters with space-y-5 to compare several transactions. warm paints a
bar in the gold accent so the middle sale stands apart from its neighbours, as on the Estate agents
hero.
A bar that holds still
A meter always needs a sequenced ancestor. For a fixed picture, pass plain numbers and a quoted
caption, and give the card one short step and a long rest: the bars grow in once and then
stay. The referral payments card on the Estate agents page works this way.
API
textAlpine expression for the right-hand caption, e.g. 'Exchange'Alpine expression, 0-100 (default 0)boolean; paints the bar in the gold accentmerged onto the meter