--- title: "Story Pager | GoodBarber's Design System" description: "The Story Pager of GoodBarber apps is the row of thin segments that fills from left to right as a story slideshow plays, one segment per item." canonical_url: "https://www.goodbarber.com/uxdesign/story-pager/" lang: fi --- # Story Pager | GoodBarber's Design System [Design System](https://fi.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [https://fi.goodbarber.com/uxdesign/](https://fi.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.b5a5ae872a5d.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.5c1a2eb6da12.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.f4c520ac8628.svg) [Overview](https://fi.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [Actions Menu](/uxdesign/actions-menu/) * [Address](/uxdesign/address/) * [Author](/uxdesign/author/) * [Content](/uxdesign/content/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) * [Premium Sticker](/uxdesign/premium-sticker/) * [Story Pager](/uxdesign/story-pager/) * [Text](/uxdesign/text/) * [ToolBar](/uxdesign/toolbar/) * [Widget Header](/uxdesign/widget-header/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Story Pager UI Elements The Story Pager shows how far a story slideshow has played, one thin segment per item, filling from left to right. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/story-pager.7ed68e539f59.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/story-pager.7ed68e539f59.mp4) ## 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](/uxdesign/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. ![One segment per item, from 2 to 12](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-StoryPager-Anatomy-Segments.db850ce85e5c.png) *One segment per item, from 2 to 12* ### 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. ![Played, playing, still to come](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-StoryPager-Anatomy-States.cdf752ef9306.png) *Played, playing, still to come* ## Properties ### Shape Each segment takes the [Shape](/uxdesign/atom-shape/) of its cell, which follows the Shape of the app. Unless the shape is sharp, the ends of the segments are rounded. ![Square or rounded ends](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-StoryPager-Properties-Shape.176be3b04974.png) *Square or rounded ends* ### 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. ![At the top or at the bottom of the cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-StoryPager-Properties-Position.23e6bcecc6e2.png) *At the top or at the bottom of the cell* ## 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. ![In a story cell, at the bottom](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-StoryPager-Layout-Placement.73a084ae7d72.png) *In a story cell, at the bottom* ## 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. ![The active segment fills from left to right](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-StoryPager-Behavior-Animation.ee553b63e771.gif) *The active segment fills from left to right* ### 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.