Home
Blogger

How to add a sticky top page-loading progress bar

sticky top page loading progress bar

Hello everyone, Welcome here, You might be noticed on several websites that when their page loads there is a moving line according to page load and you might want to add it to your website then this tutorial is for you. In this tutorial, we will share how to add a page-loading progress bar. So without wasting much time let's check how to implement it on your website.

How to add a sticky top page-loading progress bar?

  • First of all, find the close </head> tag and paste the following CSS just above it by creating <style></style>.

/* Pace v1.2.4 - Modified | MIT License | github.com/CodeByZach/pace*/.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pace-inactive{display:none}.pace .pace-progress{background:red;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}

You can replace highlighted red with your colour hex code or other.


  • Then find the close </body> tag and paste the following javascript src just above it.

    • <script async='true' src='https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js'/>

  • Then Save HTML

    • How to add a sticky top page-loading 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 follow above given steps

    • Conclusion


    Hope this How to add a page-loading progress bar 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 website, and Have a nice day!