Friday, 13 December 2019

Installing the Cool Preloading Effect on Blogger

Installing the Cool Preloading Effect on Blogger

Installing the Cool Preloading Effect on Blogger
Friday, 13 December 2019

Installing the Cool Preloading Effect on Blogger


There are many ways to beautify your blog, one of them is by Installing the Cool Preloading Effect on this Blogger. For those who are curious, see the tips below.
The workings of the Preloading Effect on Blogger are transitions that will appear automatically when loading a page on the blog and will disappear after the page is loaded fully. The Preloading effect that I will share will not affect the speed of the blog because it is very light pure CSS and SVG without images. Previously I also shared a post related here How to Provide Simple Loading Animation Effects When a Page Is Loaded. The following tips on How to Install the Preloading Effect

Installing the Cool Preloading Effect on Blogger

Before adding this code that I will share, 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'/>

Please replace the jQuery library that already exists on your blog with the version above.

Open Blogger> Themes> Click the Edit HTML button> Add this code before </body> or &lt;!--</body>--&gt;&lt;/body&gt;

jQuery
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]></script>
Then add this code just below the <body>

HTML
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>
Then add this CSS code before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}</style>
After that, click the Save theme button and see the results.
Other options for Preloading Animation

And here I have also provided several HTML and CSS options for the preloading animation effects that you can adjust to your needs.

Dot bounce
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
<style type='text/css'>
/* Preloader */
#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}</style>


Pacman



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

<style type='text/css'>
/* Preloader */
#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:0}
.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 0 0}
.pacman .bottom::before{bottom:0;border-radius:0 0 60px 60px}
.pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0 0 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)}}
</style>

Square



HTML

<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

<style type='text/css'>
/* Preloader */
#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)}}
</style>


Thus How to Install the Cool Preloading Effect on Blogger. Hopefully useful and cautious.
Installing the Cool Preloading Effect on Blogger
4/ 5
Oleh

Comments