Create a scroll progress bar with Tailwind CSS and Javascript

Today we are starting a new series of tutorials, but with a twist. We are leaving Alpinejs behind and instead using vainilla JavaScript to create our components.

Originally posted on: https://lexingtonthemes.com/tutorials/how-to-create-a-scroll-progress-bar-with-tailwind-css-and-javascript/

What is a scroll progress bar?

A scroll progress bar is a bar that shows the progress of the user’s scrolling through a page. It is typically used to indicate the amount of content that has been scrolled and the remaining amount of content to be scrolled. The scroll progress bar can be used to provide feedback to the user about their scrolling experience and to help them understand how much content is left to read.