Articles on: Blogs

How to add progress bar to blog posts

This guide will show you how to add a progress bar to blog posts.

Step 1

Copy this code:

<div id="progressBarContainer">
    <div id="progressBar"></div>
</div>

<script>
  window.addEventListener("scroll", updateProgressBar);

  function updateProgressBar() {
    const scrollableHeight =
      document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercentage = (window.pageYOffset / scrollableHeight) * 100;
    const progressBar = document.getElementById("progressBar");

    progressBar.style.width = scrollPercentage + "%";
  }
</script>

Step 2

Paste the copied code in Blog > Each blog post </body> custom HTML code

Step 3

Now copy this code:

<style>
  #progressBarContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 9999;
  }
  #progressBar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #4D61FC;
    width: 0%;
  }
</style>

Step 4

Paste this code in Blog > Each blog post <head> custom HTML code

Step 5

In this code, specify the desired color for your progress bar

Done!

Your blog posts now have a progress bar.

Updated on: 18/12/2023

Was this article helpful?

Thank you!