<div class="main id">
  <div id="progress"></div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam cumque, reiciendis dolore, aperiam laudantium consectetur, doloribus quam earum repellat dicta ipsum? Magnam quaerat iste exercitationem eius esse est excepturi alias?</p>
  <p>Doloremque nulla consequuntur dolorem reiciendis, provident iure ipsa totam consectetur, quos illo corporis voluptate. Neque ullam eum corporis sed. Adipisci animi hic ipsam dolore eos asperiores voluptas nulla officia obcaecati.</p>
  <p>Incidunt sed, consectetur velit quod dolorum qui voluptas voluptate soluta? Itaque magnam eum sed, temporibus nobis voluptate nemo quam beatae iste id, debitis possimus. Minima ad blanditiis omnis nesciunt animi!</p>
  <p>Officiis adipisci reprehenderit culpa similique cum unde cumque ducimus, voluptate ipsam omnis laboriosam. Facilis doloribus pariatur neque repudiandae, incidunt distinctio maiores eius a, itaque ea modi accusantium! Obcaecati, explicabo vitae!</p>
  <p>Deserunt excepturi placeat reiciendis eaque iure odit numquam, voluptatibus amet ea soluta tenetur quibusdam asperiores, animi eligendi unde facere dolore tempora delectus praesentium! Obcaecati, non rerum! Porro perferendis cumque quod!</p>
  <p>Veniam aliquam laboriosam maxime beatae nam molestiae facilis libero, ullam blanditiis magnam, reiciendis voluptas modi, illo deserunt sint tempore dolor voluptatum vel quibusdam molestias? Fugiat vitae eligendi iste amet dolores!</p>
  <p>Quisquam, ipsum dolore. Reiciendis sequi doloremque, qui officiis id fuga voluptatem tempore temporibus quos delectus ea eum expedita earum nihil quas, numquam vero quisquam aliquam provident optio commodi explicabo ab.</p>
  <p>Molestias sunt, ea quod optio commodi maxime aut suscipit, aspernatur ullam quia recusandae fugiat distinctio ipsam ipsa! Cum illo ullam numquam quas quos, laboriosam veniam repudiandae tempore quaerat deleniti eius.</p>
  <p>Tenetur autem, aut repellendus asperiores sed quis nihil deleniti dolor rem, vel id architecto cum repudiandae ea debitis numquam nesciunt suscipit minus laudantium voluptate. Totam ipsum amet deleniti nam optio?</p>
  <p>Exercitationem id corrupti minima tempora deleniti dolore, suscipit sit laboriosam voluptatum, vitae deserunt illo assumenda necessitatibus cum reiciendis sint facere et tempore quam totam odio molestias aspernatur quisquam. Veritatis, minima?</p>
</div>

*,
::after,
::before {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 1.25em;
}

.main {
  line-height: 1.4;
  inline-size: 80vw;
  margin: 0 auto;

  p {
    inline-size: 80ch;
  }
}

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.5rem;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}