Instagram/WhatsApp Stories have a signature UI: those segmented bars across the top, one filling at a time. It looks fancy but it's a simple pattern. Here's a live, tappable rebuild in vanilla JS + CSS.
The segmented bar
One bar per story. The rule: only the active segment animates its width 0→100%; segments before it are full, segments after are empty. When the active one completes, advance to the next and reset the rule.
Driving the fill
A single requestAnimationFrame loop tracks elapsed time vs the per-story duration (~4s) and sets the active bar's width. On completion → next story.
