Creating a Gradient Reading Progress Bar in NextJS with TailwindCSS
I am building this portfolio website to showcase my app and services to the world. During my research on portfolio blog sites, I came across a reading progress bar that is placed at the top of the page to indicate how much of the post is left to read.
This progress bar is a good way to know how much content is remaining and it provides feedback to the user, potentially improving the user experience of the website.
I found a tutorial by Anshuman Bhardwaj that explains how to implement a reading progress bar in a React and TailwindCSS project. Since my site is built with NextJS and TailwindCSS, I was able to adapt the tutorial to suit my website.
Let's see how to create a reading progress bar like the one on my website.
If you want to access the full source code for this project, you can find it on the tutorial's below source code section.
Create a Hook File in Your NextJS Project
Copy this code snippet below and save it as
This code snippet was obtained from Anshuman Bhardwaj's blog post. I have added an additional NextJS router event to reset the completion to 0 when the page changes. This ensures that the reading progress bar will be updated when a user visits another blog post.
I have used a TailwindCSS gradient and adjusted the
backgroundSize CSS property to reflect the completion percentage. This also supports the transition utility for smooth animations.
You can find the source code for this tutorial on https://github.com/biplobsd/reading-progress-bar
You can also see the implementation of this reading progress bar on the PNP website, which is an open-source project.
That's it! If you have any questions, feel free to ask in the comment box below. 🚀🚀🚀🚀