React Reading Progress Bar: A Step-by-Step Guide

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. Then, 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.

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.

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:

• document.documentElement returns the root element of the document
• scrollTop is the number of pixels vertically scrolled through an element’s content
• scrollHeight is the complete measurement of the height of an element’s content
• clientHeight is the inner height of an element

By dividing scrollTop by the amount left to scroll, we can calculate the 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.

The useEffect Hook

Our progress bar logic is complete, but we need to add an important functionality – the component life cycle. We’ll use the useEffect Hook to handle side effects, such as DOM manipulation.

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.

Get Started with LogRocket

Take your React development to the next level with LogRocket’s modern error tracking. Sign up for an app ID and get started in minutes.