Progress fill

No progress bar. The card's own background fills from the left as items get ticked — 0, 24, 40, 75, 100% — with the text sitting on top unchanged. The number counts on the same clock as the fill, and at 100% the whole card lifts and glows once.

What it is

There is no progress bar. The card's own background fills from the left as items get ticked, the text sitting on top unchanged, and at the finish the whole card lifts and glows once. It suits habit trackers, checklists, onboarding steps and order status — anywhere a bar would be one more element competing for space. A strong pattern for apps that want progress to feel like a state of the object, not a widget next to it.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 7 集「6 种组件交互提升 App 和小程序质感」· 02 进度就是底色 Progress Fill