• Previous CSS Tip
• Next CSS Tip

Calculate the scroll progress of the page

Get the scroll progress of the page as a CSS variable using a few lines of code

• Powered by Scroll-Driven animations
• Defined at the :root level (avaiable to all the elements)
• Typed using @property
• You can easily use it within any formula

@property --s {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0; 
}
:root {
  animation: scroll 1s linear;
  animation-timeline: scroll();
}
@keyframes scroll {
  to {--s: 100}
}

element:before {
  content: counter(s) "%";
  counter-reset: s var(--s);
}

See the Pen CSS only scroll progress by Temani Afif (@t_afif) on CodePen.

More CSS Tips

• Count the number of lines inside a text
• Get the width & height of any element without JavaScript
• Calculate the scroll progress of an arbitrary element
• Manual typography using Scroll-driven animations
• Typed CSS variables using @property
• Get the screen width & height without JavaScript