How to a create a scroll progress bar with Tailwind CSS and Javascript

#tailwindcss #javascript #astrojs #webdev

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.

See it live and get the code

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.

Use cases:

Content marketing: A scroll progress bar can be used to show the progress of a user's reading through a blog post or article.
E-commerce: A scroll progress bar can be used to show the progress of a user's browsing through a product catalog or shopping cart.
Web development: A scroll progress bar can be used to show the progress of a user's reading through a documentation or tutorial.
Social media: A scroll progress bar can be used to show the progress of a user's reading through a news feed or social media feed.

and many similar use cases.

The markup

id="scroll-progress: This is the id of the scroll progress bar.
bg-orange-600: This is the background color of the scroll progress bar. You can change this to any color you like.
h-1: This is the height of the scroll progress bar. You can change this to any height you like.
The classes fixed top-0 left-0: This makes the scroll progress bar fixed to the top of the page and left-aligned.
The calss z-50: This makes the scroll progress bar appear on top of other elements on the page.

<div
  id="scroll-progress"
  class="bg-orange-600 h-1 fixed top-0 left-0 z-50">
</div>

The JavaScript

window.addEventListener("scroll", function () {: This is the event listener that listens for scroll events.
const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;: This calculates the total height of the scrollable content on the page.
const scrolled = window.scrollY;: This calculates the current scroll position of the page.
const progressBar = document.getElementById("scroll-progress");: This gets the scroll progress bar element.
const progress = (scrolled / scrollableHeight) * 100;: This calculates the progress of the scroll position.
progressBar.style.width = progress + "%";: This sets the width of the scroll progress bar to the calculated progress.

window.addEventListener("scroll", function () {
    const scrollableHeight =
      document.documentElement.scrollHeight - window.innerHeight;
    const scrolled = window.scrollY;
    const progressBar = document.getElementById("scroll-progress");
    const progress = (scrolled / scrollableHeight) * 100;
    progressBar.style.width = progress + "%";
  });

Conclusion

This is a simple scroll progress bar that uses Tailwind CSS and JavaScript to create a progress bar that shows the user's scrolling progress. It's a great way to add a visual cue to the user's scrolling experience and to help them understand how much content is left to read. You can customize the progress bar to fit your needs and use it in your own projects, or you can use it as a starting point for your own scroll progress bars.

While this is created with JavaScript, you can also do it with plain CSS or Tailwind CSS if you prefer.

Hope you enjoyed this tutorial and have a great day!

Top comments (5)

Ben Sinclair • May 10

Your use cases confuse me -

Content marketing: A scroll progress bar can be used to show the progress of a user's reading through a blog post or article.

That sounds fine!

E-commerce: A scroll progress bar can be used to show the progress of a user's browsing through a product catalog or shopping cart.

I don't think it's likely people would be using their cart in a manner where the page is long enough for this to matter, and the position on the page is likely irrelevant since most carts put their main CTA at the top.

Web development: A scroll progress bar can be used to show the progress of a user's reading through a documentation or tutorial.

This is the same as the Content marketing case.

Social media:all the same thing restated? Except I suppose for the final one, "social media".

People don't use progress indicators for social media feeds because they are typically infinite scroll and the bar will jump back and forth a lot as you read!

My suggestion would be to inject the element with Javascript in the first place rather than baking it into the HTML, and omitting the Tailwind aspect, which is adding a dependency but not any actual benefit. If you're creating and modifying the element with script, you can add style attributes the same way and keep it entirely separate, so you can inject the progress bar into any page you like with a function call.

Michael Andreuzza • May 10

all the same thing restated?

Just examples man, don't get it twisted.

Rishav Kumar • May 15

Another way to add Scroll Progress Bar in React

ScrollProgressBar.jsx component

import React, { useEffect, useState } from "react";

const ScrollProgressBar = () => {
  const [scrollProgress, setScrollProgress] = useState(0);

  useEffect(() => {
    const calculateScrollProgress = () => {
      const scrollTop = window.scrollY;
      const scrollHeight =
        document.documentElement.scrollHeight - window.innerHeight;
      const progress = (scrollTop / scrollHeight) * 100;
      setScrollProgress(progress);
    };

    const scrollListener = () => {
      requestAnimationFrame(calculateScrollProgress);
    };

    window.addEventListener("scroll", scrollListener);

    return () => {
      window.removeEventListener("scroll", scrollListener);
    };
  }, []);

  return (
    <div
      className="fixed top-0 left-0 h-1 bg-sky-300"
      style={{ width: `${scrollProgress}%` }}
    />
  );
};

export default ScrollProgressBar;