"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.
03. Click On Layout Link
Click on the layout link, like this.
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".
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".
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".
FAQs
-
Can I use this code in my blogger?
Yes, you can use this code.
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
ReplyDeletePlease check javascript code.
ReplyDelete