Step-by-step: Add a Reading-progress Progress Bar to your Blog Site



At the beginning, I want to mention, that the below mentioned example code is the exact one we are using on blog-everything website while you reading our blog posts :)


Adding a horizontal reading-progress bar to your blog can be a great way to give your readers a sense of how much content is left to read on a page, and can help them better navigate your site. In this article, we'll cover the basics of adding a horizontal reading-progress bar to your blog, including what you need to know about HTML and CSS, and how to use JavaScript to create and customize the scroll bar.


What is a horizontal reading-progress bar?

A horizontal reading-progress bar is a visual indicator that shows the user how much of a webpage has been scrolled through. It is typically displayed as a bar that runs along the bottom of the page, and its length increases as the user scrolls down. The bar can be styled to match the look and feel of your site, and can be customized with different colors, widths, and animations.


Setting up the HTML

To add a horizontal reading-progress bar to your blog, you'll first need to set up the HTML for the bar. You can do this by creating a div element that will act as the container for the bar, and then adding a div element inside of it that will act as the actual bar. Here's an example of what this might look like:



<div id="progress-bar-container">
  <div id="progress-bar"></div>
</div>

In this example, the progress-bar-container div will act as the container for the bar, and the progress-bar div will be the bar itself. You can give them any ids you want but it's important to use them consistently in the later stages.


Styling the bar with CSS

Once you have the HTML set up, you can use CSS to style the bar. Here's an example of some basic CSS that you can use to style the bar:



#progress-bar-container {
  width: 100%;
  height: 5px;
  position: fixed;
  top: 0;
  left: 0;
}
#progress-bar {
  width: 0%;
  height: 100%;
  background-color: #d1c827;
  border:1px solid #000000;
  z-index:9999;
}

In this example, we're giving the progress-bar-container a fixed width and height, and positioning it at the top of the page. We're also giving the progress-bar a background color that fits to our website design. In that example-it's yellow-ish, feel free to customize it to your own. There are a lots of HTML color pickers around, which will help you to pick the best fit for you. I've added a thin 1px border to the style, just to bump the design a little-bit.


Adding functionality with JavaScript

Once you have the HTML and CSS set up, you can use JavaScript to add functionality to the bar. Here's an example of some basic JavaScript that you can use to create the scroll bar:



const progressBar = document.querySelector("#progress-bar");
const totalHeight = document.body.scrollHeight - window.innerHeight;

window.addEventListener("scroll", function() {
  const progress = (window.pageYOffset / totalHeight) * 100;
  progressBar.style.width = progress + "%";
});

In this example, we're using the window.addEventListener method to listen for the scroll event, and then calculating the progress of the scroll as a percentage of the total height of the page. We're then setting the width of the progress-bar to match the calculated progress percentage.


You can also add some other features like changing the color of the progress bar as it progresses, or adding animations to make the bar look more dynamic. For example, you can use CSS transitions to smoothly change the width of the bar as the user scrolls, or use JavaScript to change the color of the bar based on the progress percentage.


Tunning: Animate the progress bar with css

Animations can be a great way to make the horizontal progress scroll bar on your blog look more dynamic and engaging for your readers. By adding animations, you can make the bar look more interesting and interactive, which can help keep your readers engaged as they scroll through your content.


There are a few different ways to add animations to a horizontal progress scroll bar. One of the most popular methods is to use CSS transitions. With CSS transitions, you can smoothly change the width of the bar as the user scrolls, which can make the bar look more dynamic and engaging.


Here's an example of how you might use CSS transitions to animate the width of the bar:



#progress-bar {
  width: 0%;
  height: 100%;
  background-color: #d1c827;
  border:1px solid #000000;
  transition: width 1s;
  z-index:9999;
}

In this example, we're using the transition property to smoothly change the width of the progress-bar over a 2-second duration. You can adjust the duration to your preference or use some other properties like animation to make it more dynamic.


Another way to add animations to a horizontal progress scroll bar is to use JavaScript. With JavaScript, you can use the setInterval function to create an animation loop that updates the width of the bar at regular intervals. You can also use the window.requestAnimationFrame method to make the animation more efficient and smooth.


You can also use JavaScript to change the color of the bar based on the progress percentage, for example, you can make the color of the bar change as it progresses from red to green, giving a visual cue to the user that they are nearing the end of the page.


Overall, adding animations to a horizontal progress scroll bar can be a great way to make the bar look more dynamic and engaging for your readers. By using CSS transitions or JavaScript, you can create smooth and interesting animations that will keep your readers engaged as they scroll through your content.


Wrap-up

Adding a horizontal reading-progress bar to your blog can be a great way to improve the user experience for your readers. It's a simple yet effective way to give your readers a sense of how much content is left to read on a page, and can help them better navigate your site. By following the steps outlined in this article, you can easily add a horizontal reading-progress bar to your blog using HTML, CSS, and JavaScript.


Admin

Read next: