Adding the effect of loading the blog is a unique and cool feature to enhance the appearance of your blog, OK for those of you who are impatient with How to install a loading page widget on the blog, you can directly refer to the discussion below.
Installing the Cool Preloading Effect on Blogger:
Before adding the code that I will share this, the code will run well in jQuery library version 1.7.1.<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
How to Add Blog Loading Effects
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- Now Search for </head>
To search </head> in the blogger template section press Ctrl+F and then type the term to
search and press enter.
Copy the code provided below and paste it just above the </head> tag.
<script type='text/javascript'> //<![CDATA[ // Preloader $(window).load(function() {$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({o verflow:"visible"})}); //]]> </script>
- Now Search for <body>
- Now copy any CSS & HTML code from the loader style provided below and paste them after <body> tag.
🔹HTML
<div id='preloader'> <div class='loader spinner'> <div class='circles'> <span class='one'></span> <span class='two'></span> <span class='three'></span> </div> <div class='pacman'> <span class='top'></span> <span class='bottom'></span> <span class='left'></span> <div class='eye'></div> </div> </div> </div>
🔹CSS
#preloader{overflow:hidden;background:#1C163A;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:#EFEFEF} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0px} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @keyframes animcircles{0%{transform:translate(0px,0px)}100%{transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1C163A} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:#FFFB16} .pacman .top::before{top:0;border-radius:60px 60px 0px 0px} .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @keyframes animtop{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-45deg)}} .pacman .bottom{animation:animbottom 0.5s infinite} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{transform:rotate(45deg)}}
- Save Theme/Template.
More styles Of Loader:
As i have told you below is the list of some other styles of loaders you can choose any that you like. You just have to copy the CSS & HTML code of that loader style instead of the above and jquery code will be the same for all.🔹HTML
<div id='preloader'> <div id='container' class='spinner'> <div id='dot'></div> <div class='step' id='s1'></div> <div class='step' id='s2'></div> <div class='step' id='s3'></div> </div> </div>
🔹CSS
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} #container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%} #dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite} @-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}} .step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0} @-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}} #s1{animation:anim 1.8s linear infinite} #s2{animation:anim 1.8s linear infinite -.6s} #s3{animation:anim 1.8s linear infinite -1.2s}
<div id='preloader'> <div class='loader spinner'> <div class='l_main'> <div class='l_square'><span></span><span></span><span></span></div> <div class='l_square'><span></span><span></span><span></span></div> <div class='l_square'><span></span><span></span><span></span></div> <div class='l_square'><span></span><span></span><span></span></div> </div> </div> </div>
🔹CSS
#preloader{overflow:hidden;background:#FA3663;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999} .spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} .loader{height:100%;width:100%} .loader .l_main{position:absolute;top:50%;left:50%;width:172px;height:128px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} @media (max-width:550px){.loader{-webkit-transform:scale(0.75);transform:scale(0.75)}} @media (max-width:440px){.loader{-webkit-transform:scale(0.5);transform:scale(0.5)}} .l_square{position:relative} .l_square:nth-child(1){margin-left:0px} .l_square:nth-child(2){margin-left:44px} .l_square:nth-child(3){margin-left:88px} .l_square:nth-child(4){margin-left:132px} .l_square span{position:absolute;top:0px;left:20px;height:36px;width:36px;border-radius:2px;background-color:#FFFFFF} .l_square span:nth-child(1){top:0px} .l_square span:nth-child(2){top:44px} .l_square span:nth-child(3){top:88px} .l_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-in;animation:animsquare1 2s infinite ease-in} .l_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-in;animation:animsquare2 2s infinite ease-in} .l_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-in;animation:animsquare3 2s infinite ease-in} .l_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-in;animation:animsquare4 2s infinite ease-in} .l_square span:nth-child(1){-webkit-animation-delay:0.00s;animation-delay:0.00s} .l_square span:nth-child(2){-webkit-animation-delay:0.15s;animation-delay:0.15s} .l_square span:nth-child(3){-webkit-animation-delay:0.30s;animation-delay:0.30s} @keyframes animsquare1{0%,5%,95%,100%{transform:translate(0px,0px) rotate(0deg)}30%,70%{transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare2{0%,10%,90%,100%{transform:translate(0px,0px) rotate(0deg)}35%,65%{transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare3{0%,15%,85%,100%{transform:translate(0px,0px) rotate(0deg)}40%,60%{transform:translate(-40px,0px) rotate(-90deg)}} @keyframes animsquare4{0%,20%,80%,100%{transform:translate(0px,0px) rotate(0deg)}45%,55%{transform:translate(-40px,0px) rotate(-90deg)}}
Thanks for reading!!
Don't forget share.