Introduction

The Story Pager is a horizontal progress bar. It shows where the user is, and how far the playback has gone, in the story layouts of the app, the slideshows that scroll on their own. It is made of several segments aligned in a row, one per item, and each segment animates in turn.

It is the progressive pager of the story layouts. It is not the Pager, the circles and dots of a carousel that the user swipes by hand.

Anatomy

The segments

Each segment is 2px high, and the segments are 4px apart. There are as many segments as there are items in the story, from 2 to 12, and they shrink proportionally so that the row always fits the width of its container. When the story holds a single item, no bar is displayed.

Filled and remaining

A segment shows two states of one color. The part already played is filled with the color, and the part still to come is the same color at 50% opacity. Once an item has played, its segment stays filled.

Properties

Shape

Each segment takes the Shape of its cell, which follows the Shape of the app. Unless the shape is sharp, the ends of the segments are rounded.

Position

The Story Pager sits at the top or at the bottom of the cell. The choice is made in the back office, with the vertical pager position of the layout.

Layout

Placement

The Story Pager belongs to the story layouts of the app, the lists that display one immersive cell at a time and move to the next one on their own. Its row of segments spans the width of the content of the cell, inside its padding, and follows that content when it is narrower than the cell, as on tablets and computers.

Behavior

Animation

When the automatic scrolling is on, the active segment fills from left to right over the scrolling speed set in the back office, a duration in seconds. When it is complete, the next segment starts, and the previous one stays filled. When the last segment is reached, the progression starts again from the first one.

Pause and resume

The progression is persistent. When the app goes to the background, when the widget is scrolled out of view, or when the screen rotates, especially on a tablet, the Story Pager pauses, and resumes from the exact same point once the story is visible again. The user can also pause it with a long press. A tap on the left goes back to the previous item, and a tap on the center or on the right moves to the next one.