Status Togglereturn

Status Toggle

A self-cycling transaction status button with spring width.

Payment status indicators are usually static badges that update on a page refresh. For a client's checkout flow, I wanted the status to feel alive — like watching a transaction clear in real time. The pill cycles through pending → confirming → done on its own, and the width springs to fit each label. It physically breathes as it changes state. Click it to replay the cycle. The spring width is the thing that makes it feel real — fixed-width pills feel like labels, springing pills feel like they're processing.

© 2026 Piyush Zingade
Calcal.com/piyushzingade