DEV Community

Cover image for How to a create a scroll progress bar with Tailwind CSS and Javascript
Michael Andreuzza
Michael Andreuzza

Posted on • Edited on

How to a 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.

Read the article, See it live and get the code

Top comments (5)

Collapse
 
moopet profile image
Ben Sinclair

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.

Collapse
 
mike_andreuzza profile image
Michael Andreuzza

all the same thing restated?

Just examples man, don't get it twisted.

Collapse
 
consolelog21 profile image
Rishav Kumar

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;
Enter fullscreen mode Exit fullscreen mode

Import and Use ScrollProgressBar in the Navbar component or Where you like to add Scroll Progress Bar

Collapse
 
r0ld3x profile image
Roldex Stark

nice

Collapse
 
document-translate profile image
Document Translate

Cool