Home
Blogger

How to add reading progress bar in Blogger

Hello everyone Welcome to Shiva Technic World nowadays many websites came with a reading progress bar that makes the website a little bit good and makes users easier to understand where they reached your website while reading an article.

By following this tutorial carefully you can easily understand how to add a reading progress bar to your Blogger website!

The reading progress bar was made with CSS, HTML, Javascript, etc.

So without wasting much time let's check how to add a reading progress bar in Blogger!

How to add a reading progress bar in Blogger?

  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <style></style>

/* Reading Progress Bar (STW) */.pRs{border:.1px solid #eceff1;top:0;left:0;z-index:999;height:6px;display:-webkit-box;display:-ms-flexbox;display:flex;background:#e9ecef}.pBar{top:0;left:0;z-index:2;border-radius:.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content;background:#9C27B0;transition:width .6s ease}.pSt{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:50px 50px}.pAn{animation:AnPr 2s linear infinite}.pSt1{background-image:linear-gradient(45deg,rgba(204,204,204,.15) 25%,transparent 25%,transparent 50%,rgba(204,204,204,.15) 50%,rgba(204,204,204,.15) 75%,transparent 75%,transparent);background-size:50px 50px}.drK .pBar{background:#F57C00}.drK .pSt{background-image:linear-gradient(45deg,rgba(255,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(255,0,0,.15) 50%,rgba(255,0,0,.15) 75%,transparent 75%,transparent);background-size:50px 50px}.drK .pRs{border:1px solid #374C63;background:#263545}

If your template supports dark mode then change drK with your template dark mode class, if your template did not support dark mode then keep it default!


  • Then paste the following HTML code just below <header>

    • <div class='pRs'><div class='pBar pSt pAn' id='progBar'></div></div>

  • Then paste the following javascript just above </body>

    • <script>/*<![CDATA[*//* Reading progress bar JS (STW) */ window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("progBar").style.width = scrolled + "%";} /*]]>*/</script>

  • Then Save the HTML

    • Conclusion

    Hope this How to add a reading progress bar in Blogger tutorial will be useful to you, if you have any doubts related to this tutorial ask me in the comment, Do share with your friends, Thanks for visiting our site, Have a nice day!