Recipe 8.5

Showing a Scroll Progress Indicator

Compatibility Note: ScrollTimeline API

This feature may not be supported on all browsers yet. Please check the latest compatibility data before using in a production application.

Browser support for ScrollTimeline API

You can use a ScrollTimeline to link an animation’s progress to an element’s scroll position. The animation seeks back and forth in sync with the scroll position.

Scroll the article below and (on supported browsers) you’ll see an animated progress bar grow and shrink as you scroll.

Demo

Hello World

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nisi, auctor tincidunt blandit et, condimentum non felis. Donec fermentum, enim sit amet blandit sodales, mi velit varius dui, sit amet porta lacus elit sed felis. Nullam eleifend volutpat semper. In hac habitasse platea dictumst. Aliquam augue metus, eleifend nec tellus vitae, pellentesque convallis diam. Fusce pharetra mi blandit nisl sollicitudin, non efficitur nunc tempus. Nulla semper sollicitudin nunc, eget pulvinar nunc. Cras nec vestibulum magna. Cras bibendum lectus fermentum neque auctor, vitae finibus ante ullamcorper. Nullam varius purus odio, eget ullamcorper metus viverra sed. Aliquam eu nisi nisl. Etiam fringilla justo neque, sit amet eleifend neque gravida sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue enim consectetur odio elementum, vitae placerat mauris feugiat. Morbi sagittis velit quis venenatis ullamcorper. Duis sodales volutpat tortor, molestie facilisis lacus dictum sit amet.

Code

JavaScript

const progress = document.querySelector('.scroll-progress');
const container = document.querySelector('.scroll-container');

// Create a timeline that's linked to the document's
// scroll position.
const timeline = new ScrollTimeline({
  source: container
});

// Start the animation, passing the timeline you just created.
progress.animate(
  [
    { transform: 'scaleX(0)' },
    { transform: 'scaleX(1)' }
  ],
  { timeline });

HTML

<style>
  .scroll-container {
    height: 16rem;
    overflow: auto;
  }

  .scroll-progress {
    height: 8px;
    transform-origin: left;
    position: sticky;
    top: 0;
    transform: scaleX(0);
  }
</style>

<div class="scroll-progress mb-4 bg-primary"></div>
<div class="scroll-container">
  <h1>Hello World</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nisi, auctor tincidunt blandit et, condimentum non
    felis. Donec fermentum, enim sit amet blandit sodales, mi velit varius dui, sit amet porta lacus elit sed felis.
    Nullam eleifend volutpat semper. In hac habitasse platea dictumst. Aliquam augue metus, eleifend nec tellus vitae,
    pellentesque convallis diam. Fusce pharetra mi blandit nisl sollicitudin, non efficitur nunc tempus. Nulla semper
    sollicitudin nunc, eget pulvinar nunc. Cras nec vestibulum magna. Cras bibendum lectus fermentum neque auctor, vitae
    finibus ante ullamcorper. Nullam varius purus odio, eget ullamcorper metus viverra sed. Aliquam eu nisi nisl. Etiam
    fringilla justo neque, sit amet eleifend neque gravida sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Vestibulum congue enim consectetur odio elementum, vitae placerat mauris feugiat. Morbi sagittis velit quis
    venenatis ullamcorper. Duis sodales volutpat tortor, molestie facilisis lacus dictum sit amet.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nisi, auctor tincidunt blandit et, condimentum non
    felis. Donec fermentum, enim sit amet blandit sodales, mi velit varius dui, sit amet porta lacus elit sed felis.
    Nullam eleifend volutpat semper. In hac habitasse platea dictumst. Aliquam augue metus, eleifend nec tellus vitae,
    pellentesque convallis diam. Fusce pharetra mi blandit nisl sollicitudin, non efficitur nunc tempus. Nulla semper
    sollicitudin nunc, eget pulvinar nunc. Cras nec vestibulum magna. Cras bibendum lectus fermentum neque auctor, vitae
    finibus ante ullamcorper. Nullam varius purus odio, eget ullamcorper metus viverra sed. Aliquam eu nisi nisl. Etiam
    fringilla justo neque, sit amet eleifend neque gravida sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Vestibulum congue enim consectetur odio elementum, vitae placerat mauris feugiat. Morbi sagittis velit quis
    venenatis ullamcorper. Duis sodales volutpat tortor, molestie facilisis lacus dictum sit amet.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nisi, auctor tincidunt blandit et, condimentum non
    felis. Donec fermentum, enim sit amet blandit sodales, mi velit varius dui, sit amet porta lacus elit sed felis.
    Nullam eleifend volutpat semper. In hac habitasse platea dictumst. Aliquam augue metus, eleifend nec tellus vitae,
    pellentesque convallis diam. Fusce pharetra mi blandit nisl sollicitudin, non efficitur nunc tempus. Nulla semper
    sollicitudin nunc, eget pulvinar nunc. Cras nec vestibulum magna. Cras bibendum lectus fermentum neque auctor, vitae
    finibus ante ullamcorper. Nullam varius purus odio, eget ullamcorper metus viverra sed. Aliquam eu nisi nisl. Etiam
    fringilla justo neque, sit amet eleifend neque gravida sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Vestibulum congue enim consectetur odio elementum, vitae placerat mauris feugiat. Morbi sagittis velit quis
    venenatis ullamcorper. Duis sodales volutpat tortor, molestie facilisis lacus dictum sit amet.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nisi, auctor tincidunt blandit et, condimentum non
    felis. Donec fermentum, enim sit amet blandit sodales, mi velit varius dui, sit amet porta lacus elit sed felis.
    Nullam eleifend volutpat semper. In hac habitasse platea dictumst. Aliquam augue metus, eleifend nec tellus vitae,
    pellentesque convallis diam. Fusce pharetra mi blandit nisl sollicitudin, non efficitur nunc tempus. Nulla semper
    sollicitudin nunc, eget pulvinar nunc. Cras nec vestibulum magna. Cras bibendum lectus fermentum neque auctor, vitae
    finibus ante ullamcorper. Nullam varius purus odio, eget ullamcorper metus viverra sed. Aliquam eu nisi nisl. Etiam
    fringilla justo neque, sit amet eleifend neque gravida sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Vestibulum congue enim consectetur odio elementum, vitae placerat mauris feugiat. Morbi sagittis velit quis
    venenatis ullamcorper. Duis sodales volutpat tortor, molestie facilisis lacus dictum sit amet.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem nisi, auctor tincidunt blandit et, condimentum non
    felis. Donec fermentum, enim sit amet blandit sodales, mi velit varius dui, sit amet porta lacus elit sed felis.
    Nullam eleifend volutpat semper. In hac habitasse platea dictumst. Aliquam augue metus, eleifend nec tellus vitae,
    pellentesque convallis diam. Fusce pharetra mi blandit nisl sollicitudin, non efficitur nunc tempus. Nulla semper
    sollicitudin nunc, eget pulvinar nunc. Cras nec vestibulum magna. Cras bibendum lectus fermentum neque auctor, vitae
    finibus ante ullamcorper. Nullam varius purus odio, eget ullamcorper metus viverra sed. Aliquam eu nisi nisl. Etiam
    fringilla justo neque, sit amet eleifend neque gravida sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. Vestibulum congue enim consectetur odio elementum, vitae placerat mauris feugiat. Morbi sagittis velit quis
    venenatis ullamcorper. Duis sodales volutpat tortor, molestie facilisis lacus dictum sit amet.
  </p>
</div>