How Instagram’s stories bar works under the hood
Instagram and WhatsApp Stories owe part of their signature feel to those neat segmented bars running across the top—one bar per story, filling up one at a time. A developer has now stripped the effect down to its simplest ingredients and rebuilt it in vanilla JavaScript and CSS, free to inspect and reuse.
The rule that keeps it clean
Each bar represents a single story. Only the currently active bar grows from 0 % to 100 %, while all bars before it remain full and all bars after stay empty. When the active bar finishes, the next one takes over and the cycle repeats. No extra layers, no hidden states—just three simple rules applied every frame.
Keeping time with the browser
Instead of handing the animation off to CSS, the rebuild uses a single requestAnimationFrame loop. Every frame it checks how much time has passed against the fixed duration of each story (around four seconds) and updates the active bar’s width accordingly. Advancing to the next story is just a matter of resetting the counters and moving the “active” pointer forward. Because the loop is in JavaScript, pausing and resuming is as easy as toggling a flag—something harder to do cleanly with pure CSS animations.
How to steer the show
The interface is split into two horizontal zones: tap the right half to jump to the next story, the left half to go back. Press and hold anywhere to freeze the timer, then release to let it continue. Whenever you jump, the script instantly re-colors all bars so the past stays filled, the future stays blank, and only the current segment is mid-fill. The live demo lets you test the flow and even peek at the code.
The result is a lightweight, reusable pattern that captures the essence of Stories without the overhead of a full social app.
Source: DEV Community. AI-assisted editorial synthesis — TechnoExpress.