• 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 A CSS-only solution to count the lines of text. July 29, 2024
• Get the width & height of any element without JavaScript Using modern CSS to get the size of any element as CSS variables. July 26, 2024
• Typed CSS variables using @property Upgrade your CSS variables by registring them using the @property. July 17, 2024
• Get the screen width & height without JavaScript A few lines of CSS to get the screen width/height as integer values. July 16, 2024