I Rebuilt Instagram Stories' Segmented Progress Bars

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.

📸 Try it (tap left/right, hold to pause): https://dev48v.infy.uk/design/day17-instagram-stories.html

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.

The interactions that sell it

• Tap the right half = next, left half = previous (split the screen into two zones).
• Press-and-hold = pause (pointerdown pauses the timer, pointerup resumes) — so users can actually read.
• Reset past/future segment states whenever you jump.

Why rAF over CSS animation

A timer loop makes pause/resume and tap-to-skip trivial — you control the clock. Pure CSS animations are harder to interrupt mid-fill.

🔨 Full build (segments → animate active → advance → tap zones → hold-to-pause) on the page: https://dev48v.infy.uk/design/day17-instagram-stories.html

Part of DesignFromZero. 🌐 https://dev48v.infy.uk