Прогресс чтения

Тонкая полоса сверху растёт по мере прочтения страницы. Через transform — без перерисовок.

Скрольте страницу.

Полоса сверху показывает, сколько страницы прочитано. Скрольте — она растёт. Это вся страница целиком, не только этот блок.

Контент для скролла

Ещё немного текста, чтобы было что мотать. Полоса — фиксированный элемент высотой 3px с transform-origin слева.

Почти конец

Код

<div class="progress"></div>

<style>
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: #E84B16; z-index: 99;
  transform: scaleX(0); transform-origin: 0 50%; }
</style>

<script>
var bar = document.querySelector(".progress");
function loop() {
  var h = document.documentElement.scrollHeight - innerHeight;
  bar.style.transform = "scaleX(" + (scrollY / h) + ")";
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>

Промпт для ИИ

Сделай индикатор прогресса чтения: фиксированная полоса 3px сверху страницы, transform: scaleX(0) с transform-origin слева; в rAF-цикле scaleX = scrollY / (scrollHeight - innerHeight). Через transform (не width!) — без перерисовок лейаута. Цвет — акцентный.