Penangan gulir JavaScript berjalan di thread utama dan menghabiskan hidupnya dengan dibatasi. Animasi CSS yang digerakkan oleh gulir dijalankan di kompositor: kemajuan animasi ADALAH posisi gulir, sehingga bilah bacaan memerlukan dua properti dan nol pendengar.

.reading-bar {
  position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--brand);
  transform-origin: 0 50%; transform: scaleX(0);
  animation: reading linear;
  animation-timeline: scroll(root block);
}
@keyframes reading { to { transform: scaleX(1); } }

Mana yang cocok, mana yang tidak

  • Teks artikel yang menggulir satu dokumen: sangat pas, bilah mencerminkan apa yang dilihat pembaca.
  • Dasbor multi-kolom atau wadah gulir di dalam halaman: cakupan garis waktu ke wadah, bukan akarnya, atau ia terletak.
  • Dukungan adalah era Chromium dan Safari; browser tanpanya tidak akan menarik apa pun. Halaman tanpa bilah tidak kehilangan apa pun.

Ambil warna dari merek dan gerak dari hal lain. Bilah yang melacak gulir dengan tenang adalah sebuah fitur; bilah yang memudar masuk dan keluar pada 60Hz adalah demo. LCP terukur situs ini tetap sama setelah tidak menambahkan apa pun, yang merupakan permintaan fitur jujur ​​di balik sebagian besar bilah kemajuan.