Skip to main content

How To Add Progress Scroll Bar In Blogger

How-to-add-scroll-progress-bar-in-blogger

"Progress scroll bar" is very popular on modern websites or on bloggers. This is a very interesting animation, where visitors can see how long this page is, how much it has read and how much is left. It creates an extraordinary effect on the user experience. It makes their internet surfing easy.


You can implement this effect with the help of javascript and external plugins. We are using javascript to create "Progress Scroll Bar Animation". If you want to use plugins check out our article.

For more interesting animation and changes in the blogger theme, you can follow our articles on blogger.



01. COPY "PROGRESS SCROLL BAR" CODE

Copy the "Progress Scroll Bar" code. As you can see our blog code for this animation which we are using in our "rustcodeweb.com" blogger. You can also follow our articles on the "Progress Scroll Bar With Plugin".

<style>
.progress-bar-container{
  position: fixed;
  width: 100%;
  bottom: 0px;
  background-color: #fff;
  margin: 0px;
  z-index: 9999;
}

.progress-bar{
  height: 5px;
  background: #FE4A49;
  width: 0%;
}
</style>

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

<script type="text/javascript">
  window.onscroll = function(){
  var windowScroll = document.documentElement.scrollTop;
  var windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrollAmount = (windowScroll/windowHeight)*100;
  document.getElementById("progress").style.width = scrollAmount + "%";
};
</script>


02. Go to Blogger Dashboard

Now go to the blogger dashboard.

go-to-blogger-dashboard


03. Click On Layout Link

Click on the layout link, like this.

click-on-layout-link


04. Create HTML/Javascript Gadget

Create a new gadget where we will paste html,css and Javascriptcode. If you don't know, how How do this, read our article "How to insert html css and javascript into blogger".

create-html-javascript-gadget



05. Paste "PROGRESS SCROLL BAR" Code

Paste that code which you copied initially. This code must contain css code inside "style tag" and javascript code inside "script tag".

Paste-Scroll-Progress-Bar-Code


06. Save Layout

Now click on the save layout icon. Your blog is ready to show the "Scroll Progress Bar". You can see a demo of this effect on "our blogger".

save-layout


FAQs

  • Can I use this code in my blogger?

    Yes, you can use this code.




Comments

  1. Hey there, i got the bar with your help, but it's not moving?? Like yours moves when i scroll down...but mine is still it doesn't move :((...i followed all the stepss

    ReplyDelete
  2. Please check javascript code.

    ReplyDelete

Post a Comment