How to create a reading progress bar with React and Styled Components

Search for a command to run...

No comments yet. Be the first to comment.
Twitter is one of the largest social media platforms in the world, with millions of users sharing their thoughts, ideas, and opinions every day. In order to help users find content that is relevant to their interests, Twitter uses a recommendation al...

The rise of ChatGPT and other AI chatbots has brought significant changes in our daily lives. These chatbots provide us with instant answers and assistance, which can be incredibly helpful. However, there is a downside to their overreliance. The more...

So far we've created the MVP of my website and deployed and hosted it on Vercel which I have a walkthrough on here. It is a simple website, and only displays the necessary information, but we want to implement some dynamic features and showing my pos...
I have to admit it. If not to you, then at least to myself. I haven't been developing my site for a long time. I've been working with Next.js on hobby projects for quite a while, and after the release of Next.js 13, I was convinced that my site neede...
Photo by Joshua Sortino on Unsplash The hypertext transfer protocol also known as HTTP is the protocol for the web. Every time you communicate through the browser, a request is sent to a server over the HTTP protocol. You have probably heard of some ...

Whenever i am reading a blog post or an article online, I find the user experience improved when i see a progress bar at top of the page indicating how much content has been read and how much is left to read.
Since I’m launching my own blog, I wanted to write a blog post describing how I’ve implemented this component with React and Styled Components. You should see the component in action by looking at the top of this page in the blog post found on my site kasperdue.com
I’ve deployed the component to NPM with the name read-progressbar, so feel free to use it and comment on how i can improve it!
The amount of progress shown in the progress bar will be determined by the amount of scrolling we have done inside the container we want to track.
My post is wrapped in a container which contains the height value and the top value we will need in order to calculate how much of the content we have read.
I’ve created a component called ReadProgressBar where you will pass a ref to the component that you want to track the progress. Whenever the ref is passed, i attach trackScrollEvent function to the scroll event on the window object.
The trackScrollEvent function will calculate the amount of scrolling done on the screen with the containers position as a context. We will use the getBoundingClientRect property of an element which will return CSS border boxes associated with the element. This will be useful, because we need the top and height value to calculate the progress.
We will then take the innerHeight of the window object to determine when the end of the container has been reached. If we are scrolling and the top of the container is off screen at the top, then the top value will have a negative value, and then we know if the progress should occur. We then subtract the window height from the container height and divide it with the top value and multiply it all with 100 to get a percentage value.
The Bar component will start with a width of 100% and a translateX value of -100%. We do not want to animate the width value due to performance issues, so instead we will animate the translateX value and slide it in from the side based on the progress. We will also hide the progress bar if the target container is not in the view yet.
To get a smooth animation when the progress is increased or decreased we will apply transition: .1s ease to the style properties, and we will apply will-change: transform; property to tell the browser which property we are going to animate.
That is all! We can now import this component into our sites and pass a ref to it and see the magic happen in the top of our pages. I’ve extended the component so we can pass a color property to style the progress bar, and a background color property to change the background of the container.
You can find the source code for the component on Github here. Feel free to comment or send a message on how i can improve the code, or a different approach to improve the overall quality.