How to Show Loader On Page Load in Blogger

How to Show Loader On Page Load in Blogger

How to Show Loader On Page Load in Blogger

You may have seen loader on page load on many websites it looks beautiful and notify the user that the page is being loaded I was just visiting a website and I founded it there and I decided to make an article or tutorial about it so that you blogger users can have that loader on their blogs.

It is not so much difficult and the CSS, HTML and jQuery code needed for this loader is not too much lengthy that it may affect your website loading time. I am also using it you would have seen while this page was being loaded.

If you want to show this loader on your blogger blog why the page is loading you can easily do it for that you just have to follow the steps provided below and do as it is said.

Steps to Show Loader on Page Load in Blogger:

  1. Go To Blogger Dashboard
  2. Then Go to Theme / Template
  3. Click Edit HTML Button
  4. Now search for </head>
  5. To Search anything in blogger Press Ctrl + F and type or paste the term to search in search bar.
  6. Now copy the CSS code provided below and paste it just above the tag which we have founded in step 4.
  7. .loader{display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:#0E2A47;background:rgba(14,42,71,.9);z-index:300}.loader .circle-spinner{border-color:#fff transparent #fff #fff;width:120px;height:120px;border-width:4px;position:fixed;top:50%;left:50%;margin-left:-60px;margin-top:-60px}.circle-spinner{-webkit-animation:rotate .8s infinite linear;-moz-animation:rotate .8s infinite linear;animation:rotate .8s infinite linear;border:2px solid #1D262D;border-right-color:transparent;border-radius:100%;display:inline-block;position:relative;overflow:hidden;text-indent:-9999px;width:18px;height:18px;vertical-align:middle}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
    For your help I have minified this CSS code.
  8. After pasting above CSS code paste this jQuery code below above CSS code.
  9. $(document).ready(function(){$('.loader').css('display','none');});
    Remember above we have used Jquery code so for that we will need to have Jquery plugin installed for that you just have to include this <script type="text/javascript" src=""></script> in your head section anywhere on your webpage. Before pasting this just have a look on it because mostly websites for blogger templates already have this jQuery script included.
  10. Now search for <body and copy the code provided below and paste it after this tag.
  11. <div class="loader" id="loader"><div class="circle-spinner"></div></div>
  12. Save Theme / Template.

You are all done now when your website is being loaded you will see a loader on page load and that loader will be automatically hidden when the page is completely loaded.

I hope this article helped you and if it did make sure to subscribe to the newsletters of this blog and become a master in blogger.

No Comment

Help us improve this article by leaving your feedback below.
Add Comment