How to Show Loader On Page Load in Blogger

How to Show Loader On Page Load in Blogger

Updated on 17 May - Post a Comment

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.
  5. Now copy the CSS code provided below and paste it just above the tag which we have founded in step 4.
    6. .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.
  6. After pasting above CSS code paste this jQuery code below above CSS code.
    7. $(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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"><-e30/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.
  7. Now search for <body and copy the code provided below and paste it after this tag.
    8. <div class="loader" id="loader"><div class="circle-spinner"></div></div>
  8. Save Theme / Template.
Tags:

0 comments for How to Show Loader On Page Load in Blogger

Cancel