How to Make a Preloader or Loading Animation Effects on Blogger
I have not finished making tutorials to beautify your blog, at this time I will provide a tutorial on how to make a preloader on a blog . What is Preloader? Preloader or pre load or in Indonesian pre loading. So there will be an animation effect before the page from the website is loaded.
I will provide 2 style options for the preloader that we will apply and the 2 options are the folding cube style and the second is the sp wave force. for those of you who are already curious about how to make it, please refer to the complete tutorial below, Cekidot
Folding Cube Style
Please copy all the css code below and place it before the </style> or ]]> </ b: skin .
/*-----------
preloader
------------*/
.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#75cbe7;background:-webkit-gradient(linear,left top,left bottom,from(#75cbe7),to(#138fc2));background:linear-gradient(to bottom,#75cbe7 0%,#138fc2 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#75cbe7',endColorstr='#138fc2',GradientType=0);z-index:99999999999}
.sk-folding-cube{margin:20px auto;width:40px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}
.sk-folding-cube .sk-cube{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);transform:scale(1.1)}
.sk-folding-cube .sk-cube:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff;-webkit-animation:sk-foldCubeAngle 2.4s infinite linear both;animation:sk-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}
.sk-folding-cube .sk-cube2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}
.sk-folding-cube .sk-cube3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}
.sk-folding-cube .sk-cube4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}
.sk-folding-cube .sk-cube2:before{-webkit-animation-delay:0.3s;animation-delay:0.3s}
.sk-folding-cube .sk-cube3:before{-webkit-animation-delay:0.6s;animation-delay:0.6s}
.sk-folding-cube .sk-cube4:before{-webkit-animation-delay:0.9s;animation-delay:0.9s}
@-webkit-keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}
@keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}Then copy all the html code below and place it under the <body> code .
<div class='preloader'>
<div class='sk-folding-cube'>
<div class='sk-cube1 sk-cube'/>
<div class='sk-cube2 sk-cube'/>
<div class='sk-cube4 sk-cube'/>
<div class='sk-cube3 sk-cube'/>
</div>
</div>Finally, copy all the javascript code below and place it above the </body> code .
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".preloader").fadeOut().delay(500).fadeOut("slow"),$("body").delay(500)});
//]]>
</script>Sp Wave style
Please copy all the css code below and place it before the </style> or ]]> </ b: skin .
#af-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}
.af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.af-sp{width:42px;height:42px;clear:both;margin:20px auto}
.af-sp-wave{border-radius:50%;position:relative;opacity:1}
.af-sp-wave:before,.af-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
.af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
.af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}Then copy all the html code below and place it under the <body> code .
<div id='af-preloader'>
<div class='af-preloader-wrap'>
<div class='af-sp af-sp-wave'>
</div>
</div>
</div>Finally, copy all the javascript code below and place it above the </body> code .
<script>//<![CDATA[
window.addEventListener('load', function() {
// document.querySelector('#af-preloader').style.display = 'none'
document.getElementById('af-preloader').style.display = 'none'
})
//]]></script>
<script>//<![CDATA[
$(window).on('load', function() {
$('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script>That's how to install the preloader in the blogger, if your template originally has a preloader installed then please delete the code first, usually it is located exactly as I told you to put the code above.
Well, friends, that's all I can say next time, thank you for visiting, see you in the article dinext
Please Wait Bro, Link will be apear in 10 seconds.
Succesfull Now Click the button
Belum ada Komentar untuk "How to Make a Preloader or Loading Animation Effects on Blogger"
Posting Komentar