<div class="progress-bar"></div>
<div class="text">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id ipsum vitae neque sollicitudin placerat porta non metus. Sed porttitor dui a justo commodo accumsan. Sed condimentum lorem sagittis lectus cursus, in dignissim sem cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque tellus ut neque auctor dignissim. Fusce non tincidunt nisi, sit amet sollicitudin mi. Vivamus porttitor aliquet libero, id aliquet purus iaculis eget. Cras congue interdum lectus, id condimentum nibh. Maecenas et dolor quis arcu dictum varius ac eu nisi.</p>
  <p>Sed ac gravida nulla. Sed blandit urna ut blandit feugiat. Maecenas vitae justo vehicula, suscipit magna vitae, euismod urna. Fusce auctor blandit commodo. Donec sit amet elit vitae nisi ultrices suscipit quis vel justo. Donec imperdiet dui sit amet porttitor bibendum. Maecenas ac velit dapibus, varius ipsum et, elementum neque. Pellentesque bibendum sit amet quam vitae blandit. Ut condimentum tristique urna, convallis vehicula augue rhoncus nec. Nullam vel fermentum quam. Nullam a iaculis lectus.</p>
  <p>Etiam arcu risus, tempus condimentum mi posuere, tristique fermentum nisl. Proin efficitur cursus velit, dapibus eleifend tortor tempor ut. Ut vitae feugiat elit. Etiam ullamcorper nunc in elit tempus ultricies. Pellentesque non lacinia nisi, non aliquet sapien. Maecenas ac dui vitae leo vestibulum dapibus. Aenean luctus, felis eget dictum lobortis, enim lacus hendrerit orci, et pharetra nibh nisl porta tortor. Aenean ut molestie lacus. In non nisi nec tellus lacinia aliquam in eu dui.</p>
  <p>Phasellus a ipsum eu enim facilisis tincidunt. Nam vulputate bibendum tortor, non lobortis orci. Donec sit amet ante id neque semper vestibulum non vitae nibh. Nulla ipsum purus, malesuada eget rutrum sed, varius ullamcorper ipsum. In hac habitasse platea dictumst. In ut porta augue. Etiam ac sollicitudin arcu. Nullam facilisis auctor libero ac porttitor. Integer fermentum risus ligula. Nullam molestie cursus massa dictum scelerisque. Cras lacinia condimentum mattis. Integer condimentum, enim et porttitor accumsan, lacus nunc blandit est, eu tempor nunc est quis arcu.</p>
  <p>Duis in venenatis diam, vitae luctus diam. Vestibulum vehicula nisl ac placerat varius. Nam lobortis magna at velit auctor, at rhoncus elit ultricies. Vestibulum tempor tortor libero. Nulla tellus dui, aliquam sed pharetra id, efficitur tincidunt nunc. Maecenas a est diam. Maecenas vitae porta sem, sed mollis libero. Nunc nec mi risus. Duis at tincidunt sem. Maecenas fermentum magna ut arcu blandit laoreet. Nullam euismod tortor quis dignissim varius. Praesent a sollicitudin augue. Nunc blandit erat maximus ligula pellentesque malesuada. Suspendisse potenti. Aliquam erat volutpat. Sed ut mauris in massa facilisis faucibus nec id elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id ipsum vitae neque sollicitudin placerat porta non metus. Sed porttitor dui a justo commodo accumsan. Sed condimentum lorem sagittis lectus cursus, in dignissim sem cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque tellus ut neque auctor dignissim. Fusce non tincidunt nisi, sit amet sollicitudin mi. Vivamus porttitor aliquet libero, id aliquet purus iaculis eget. Cras congue interdum lectus, id condimentum nibh. Maecenas et dolor quis arcu dictum varius ac eu nisi.</p>
  <p>Sed ac gravida nulla. Sed blandit urna ut blandit feugiat. Maecenas vitae justo vehicula, suscipit magna vitae, euismod urna. Fusce auctor blandit commodo. Donec sit amet elit vitae nisi ultrices suscipit quis vel justo. Donec imperdiet dui sit amet porttitor bibendum. Maecenas ac velit dapibus, varius ipsum et, elementum neque. Pellentesque bibendum sit amet quam vitae blandit. Ut condimentum tristique urna, convallis vehicula augue rhoncus nec. Nullam vel fermentum quam. Nullam a iaculis lectus.</p>
  <p>Etiam arcu risus, tempus condimentum mi posuere, tristique fermentum nisl. Proin efficitur cursus velit, dapibus eleifend tortor tempor ut. Ut vitae feugiat elit. Etiam ullamcorper nunc in elit tempus ultricies. Pellentesque non lacinia nisi, non aliquet sapien. Maecenas ac dui vitae leo vestibulum dapibus. Aenean luctus, felis eget dictum lobortis, enim lacus hendrerit orci, et pharetra nibh nisl porta tortor. Aenean ut molestie lacus. In non nisi nec tellus lacinia aliquam in eu dui.</p>
  <p>Phasellus a ipsum eu enim facilisis tincidunt. Nam vulputate bibendum tortor, non lobortis orci. Donec sit amet ante id neque semper vestibulum non vitae nibh. Nulla ipsum purus, malesuada eget rutrum sed, varius ullamcorper ipsum. In hac habitasse platea dictumst. In ut porta augue. Etiam ac sollicitudin arcu. Nullam facilisis auctor libero ac porttitor. Integer fermentum risus ligula. Nullam molestie cursus massa dictum scelerisque. Cras lacinia condimentum mattis. Integer condimentum, enim et porttitor accumsan, lacus nunc blandit est, eu tempor nunc est quis arcu.</p>
  <p>Duis in venenatis diam, vitae luctus diam. Vestibulum vehicula nisl ac placerat varius. Nam lobortis magna at velit auctor, at rhoncus elit ultricies. Vestibulum tempor tortor libero. Nulla tellus dui, aliquam sed pharetra id, efficitur tincidunt nunc. Maecenas a est diam. Maecenas vitae porta sem, sed mollis libero. Nunc nec mi risus. Duis at tincidunt sem. Maecenas fermentum magna ut arcu blandit laoreet. Nullam euismod tortor quis dignissim varius. Praesent a sollicitudin augue. Nunc blandit erat maximus ligula pellentesque malesuada. Suspendisse potenti. Aliquam erat volutpat. Sed ut mauris in massa facilisis faucibus nec id elit.</p>
</div>

:root {
  scroll-timeline-name: --scrollTimeline;
}

body {
  font-family: -apple-system, sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  position: relative;
}

.text {
  margin-inline: auto;
  max-inline-size: 600px;
  padding: 40px;
}

.progress-bar {
  animation-name: stretch;
  animation-timing-function: linear;
  animation-timeline: --scrollTimeline;
  background-color: #0061FE;
  position: fixed;
  block-size: 4px;
  inset-block-start: 0;
  inset-inline-start: 0;
}

@keyframes stretch {
  from {
    inline-size: 0%;
  }
  to {
    inline-size: 100%
  }
}