Components

Stories Progress

A flex row of pill segments that fill left-to-right via transform: scaleX, driven by an animation-duration set per-instance to match that story's display time exactly. Arguably the single most recognizable Instagram-specific component in this manual.

Live

Watch it run, segment by segment

Implementation

The only major animation that's deliberately linear

.segment-fill {
  transform-origin: left;
  transform: scaleX(0);
  animation: fillProgressBar linear forwards;
  animation-duration: inherit; /* set per-instance to match story display time */
}
@keyframes fillProgressBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

Every other major animation in this system uses one of the five named easing curves (see Motion). This is the exception — because it’s communicating elapsed real time, not expressing personality, it’s explicitly linear.

Usage

Do / Don't

Do

Set animation-duration to match the actual story display time, per segment.
Keep the fill animation strictly linear — this is the one place where an eased curve would misrepresent elapsed time.
Use a 3px pill radius on both the track and the fill.

Don’t

Apply Ease Glide or any of the other named curves to the segment fill.
Reuse this exact pattern for a generic loading bar that isn't tied to real elapsed time.