How to Add Animated Progress Bar in Blogger

 

Hi to all, in this article I am going to tell you all about adding animated progress bar in blogger easily in just few minutes.

Mainly if your webpage article is too long, it will definitely make hard to come back to the top, for that users need to scroll more times to come up and it is also time wasting for the users especially who are accessing your webpage in mobile, because PC users have a scroll bar on the right side on the website but for mobile users they have to touch and scroll, So here we are going to tell you a solution for your website.

It will provides you back to the top and is also user friendly and looks professional, animated, page progress etc.

So many thinks about the speed of the webpage may affect by adding this progress bar, but here you need not to worry about the speed because we have used CSS and pure JavaScript, so it will not affect your webpage speed or any other.

So, read the below provided steps carefully and completely to get clear understanding about adding animated progress bar in your bogger website without any error or issue.

Steps to Add Animated Progress Bar in Blogger

Login to Blogger website

First of all you need to visit official blogger website.

Now you need to login to your blogger website dashboard by using your login credentials safely.

Backup Blogger Theme

After login to blogger website dashboard, make sure that you have latest website theme code backup, because if any error or issues occur while saving the code inside theme editor then you can restore your backup theme and can run your website as usual and if you want to backup your blogger theme code then you can follow the below path.

Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

After successful backup of your blogger theme code, now it;s time to add the code for animated progress bar in your blogger theme code, and to open it you can follow below provided path.

Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Adding HTML Code

• Open blogger theme editor.

• Search for closing body tag or </body> tag.

• Now copy below provided HTML code.

• Paste the copied HTML code just above </body> tag.

• Save the theme.

<!--[ Back to Top ]-->
      <div class='Ttop'>
<svg onclick='window.scrollTo({top: 0})' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92'/><circle class='c' cx='17' cy='17' r='15.92'/><path class='line d' d='M15.07,21.06,19.16,17l-4.09-4.06'/></svg>
      </div>
    

Adding CSS Code

• Open blogger theme editor.

• Search for ]]></b:skin> tag.

• Copy below provided CSS code.

• Paste the copied CSS code just above ]]></b:skin> or you can paste it above <head/> tag by adding <style></style>.

• Save the theme.

.Ttop{display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:70px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:5;transform:scale(0);transition:transform .3s ease, opacity .3s ease,visibility .3s ease,margin-bottom 1s ease} .Ttop.vsbl{visibility:visible;opacity:1;transform:scale(1)}.Ttop:hover{opacity:.8} .Ttop svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .Ttop svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .Ttop svg .c{fill:none;stroke:#6200ee;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .Ttop svg .d{fill:none;stroke:#08102b} .drK .Ttop svg .b{fill:#2d2d30;stroke:#404045} .drK .Ttop svg .c{stroke:#8775f5} .drK .Ttop svg .d{stroke:#fffdfc}
    

Adding JavaScript Code

• Open blogger theme editor.

• Search for closing body tag or </body> tag.

• Copy below provided JavaScript code.

• Paste the copied JavaScript code just above </body> tag.

• Save the theme.

<script>/*<![CDATA[*//* Back to Top */ var prPt=document.querySelector(".Ttop circle.c"),ptLh=prPt.getTotalLength();prPt.style.transition=prPt.style.WebkitTransition="none",prPt.style.strokeDasharray=ptLh+" "+ptLh,prPt.style.strokeDashoffset=ptLh,prPt.getBoundingClientRect();var updateProgress=function(){var t=document.documentElement.scrollTop,e=document.documentElement.scrollHeight-window.innerHeight;prPt.style.strokeDashoffset=ptLh-t*ptLh/e};updateProgress(),window.addEventListener("scroll",updateProgress);var offset=0;window.onscroll=function(){document.documentElement.scrollTop>offset?document.querySelector(".Ttop").classList.add("vsbl"):document.querySelector(".Ttop").classList.remove("vsbl")};
/*]]>*/</script>
    

Note

If you get any error or issue while saving the code in theme editor then restore your backup code and you need to repeat the same process as above mentioned carefully.

Conclusion

I hope that you all have understood about adding animated progress bar in blogger website easily by using HTML, CSS and JavaScript without any error or issue.