Enhance Your Website’s User Experience with a Reading Progress Bar

Get Started with React

Reading progress bars have become a staple in online reading platforms, providing users with a sense of accomplishment as they scroll through content. Fortunately, adding this feature to your website or blog is relatively simple. In this article, we’ll guide you through the process of creating a reading progress bar in React.

Laying the Foundation

To begin, create a new React app using the following commands:

npx create-react-app my-app
cd my-app

Delete all content from the App.js file, as we’ll be adding our components here.

Creating a Dummy Blog Post

Our primary focus is on creating a reading progress bar, not a blog. Therefore, we’ll use an existing template to create a dummy blog post. You can use any template or dummy content you prefer. Follow these steps to create a dummy content component:

• Create a Components folder in your Src folder
• Create a new file called DummyContent.js
• Add the HTML for the blog post in DummyContent.js
• Create a new CSS file called Dummy.css for styling
• Import and render the DummyContent.js file in your App.js file

Building the Reading Progress Bar

Now, let’s create the reading bar component. In the same Components folder, create a new file called ReadingBar.js. Add the basic markup using rfce.

import React from 'eact';

const ReadingBar = () => {
  return (

  );
};

export default ReadingBar;

Styling with Styled-Components

To create the styling for our reading progress bar, we’ll use styled-components. We’ll create a styled.div called Bar, which will contain the styling for our reading bar. Make sure to declare Bar outside of our main ReadingBar function to avoid performance issues.

import styled from 'tyled-components';

const Bar = styled.div`
  /* Add your styling here */
`;

Calculating Scroll Percentage

Calculating precise scroll percentages can be tricky. We need to use the precise scroll percentage for our bar, ensuring it completes accurately. To achieve this, we’ll use the following method:

const scrollPercentage = () => {
  const documentElement = document.documentElement;
  const scrollTop = documentElement.scrollTop;
  const scrollHeight = documentElement.scrollHeight;
  const clientHeight = documentElement.clientHeight;
  const percentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
  return percentage;
};

Using States

We’ll store the percentage value using a simple state, then use the state in the inline style of the Bar component.

import { useState, useEffect } from 'eact';

const ReadingBar = () => {
  const [percentage, setPercentage] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const percentage = scrollPercentage();
      setPercentage(percentage);
    };
    document.addEventListener('scroll', handleScroll);
    return () => {
      document.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    
  );
};

Putting it All Together

Finally, import the Bar component in your App.js file and run it. Your reading progress bar should now be fully functional.

import React from 'eact';
import DummyContent from './Components/DummyContent';
import ReadingBar from './Components/ReadingBar';

const App = () => {
  return (

  );
};