Scroll de lectura

Advertencia

Esta funcionalidad es un poco reciente asi que no esta soportado por todos los navegadores, en Can i use puedes revisar que tan soportado esta en este preciso momento

codi.link


<section>
<div class="progress">
</div>
  <article>Parrafo 1</article>
  <article>Parrafo 2</article>
  <article>Parrafo 3</article>
  <article>Parrafo 4</article>
  <article>Parrafo 5</article>
</section>

<style>

.progress{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: cyan;
  transform: scaleX(0);
  transform-origin: left;
  animation-name: progress;
  animation-timeline: scroll();
}

@keyframes progress{
  100%{
    transform: scaleX(1);
  }
}

article{
  width: 100%;
  height: 70vh;
  background-color: darkkhaki;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  font-size: 60px;

}

</style>