Hello Everyone, In This Tutorial I Will Share How To Add Preloader Effect in Blogger. Preloader is an animation effect that appears before the content of the blog is loaded and displayed. This preloader effect is perfect for those of you who prioritize blog quality and design.
The script used to create this preloader animation effect uses pure CSS and a little jQuery script that will be placed in the blog template.
No need to worry about loading speed or performance of your blog after installing this preloader animation effect. Because the animation effect I give is very light and only use SVG for the design.
How Does Work This Preloader ?
The way this preloader animation works is a transition effect that will appear on the blog page before the content and the blog page is fully loaded. This preloader animation effect or this transition will reappear and disappear after the page is fully or fully loaded.
How To Add Preloader Effect in Blogger :
]]></b:skin>
.
/* This Preloader Design By Www.SmartTechMukesh.Com */.preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999;}.smarttechmukesh-logo{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);}.preloader .smarttechmukesh-logo1 img{padding:0 10px;border-radius:4px;letter-spacing:normal;top:-0px;margin-right:0px;align-items:center;}.preloader .smarttechmukesh-logo1 h1::first-letter,.preloader .smarttechmukesh-logo1 h2::first-letter{background:#6200ee;color:#fff;padding:0 10px;border-radius:4px;letter-spacing:normal;top:-0px;margin-right:3px;}.preloader .smarttechmukesh-logo1 h1,img{font-size:30px;}
Change This Text Background Color According To You Need. #6200ee
</head>
.<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>//<![CDATA[var _0x4c82fa=_0x5d69;(function(a,b){for(var c=_0x5d69,d=a();;)try{var e=parseInt(c(148))/1*(-parseInt(c(169))/2)+-parseInt(c(157))/3+parseInt(c(179))/4*(-parseInt(c(129))/5)+parseInt(c(160))/6+-parseInt(c(173))/7+-parseInt(c(149))/8+parseInt(c(144))/9*(parseInt(c(141))/10);if(e===b)break;else d.push(d.shift())}catch(a){d.push(d.shift())}})(_0x5d72,762314);function _0x5d69(a,b){var c=_0x5d72();return _0x5d69=function(a){a-=119;var b=c[a];return b},_0x5d69(a,b)}var _0x4b57d8=function(){var a=_0x5d69,b={};b[a(127)]=function(a,b){return a===b},b.IyBiB=a(145);var c=b,d=!0;return function(a,b){var e=d?function(){var d=_0x5d69;if(b)if(c.bGYwr(c[d(122)],d(120))){var e=_0x4ddd03.constructor[d(135)][d(134)](_0x5bff08),f=_0x1aa20b[_0x46113f],g=_0x5193c8[f]||e;e[d(133)]=_0x1311e8[d(134)](_0x3a9a71),e[d(158)]=g[d(158)][d(134)](g),_0xd96603[f]=e}else{var h=b[d(175)](a,arguments);return b=null,h}}:function(){};return d=!1,e}}(),_0x1752e4=_0x4b57d8(this,function(){for(var a=_0x5d69,b={EDtKT:function(a,b){return a===b},ElcCi:"rmwbQ",AObBa:a(163),nJViZ:function(a,b){return a(b)},iHTqg:function(a,b){return a+b},dmrEx:function(a,b){return a+b},tFtwJ:"return (function() ",mGXMz:a(184),bihyg:function(a){return a()},JbpPy:a(183),fJFsH:a(126),AESxA:a(176),wXwHa:a(166),diini:function(a,b){return a<b},vXCiZ:a(185)},c=function(){var c=a;if(b[c(131)](b.ElcCi,b[c(132)]))_0x20d1f7=_0x5e684d;else{var d;try{d=b.nJViZ(Function,b[c(159)](b[c(182)](b[c(119)],b[c(177)]),");"))()}catch(a){d=window}return d}},d=b[a(164)](c),e=d.console=d[a(162)]||{},f=[a(125),b.JbpPy,a(152),b.fJFsH,b[a(181)],b[a(180)],a(178)],g=0;b[a(142)](g,f[a(156)]);g++)for(var h=b[a(153)][a(147)]("|"),i=0;;){switch(h[i++]){case"0":l[a(133)]=_0x4b57d8.bind(_0x4b57d8);continue;case"1":var j=f[g];continue;case"2":e[j]=l;continue;case"3":var k=e[j]||l;continue;case"4":var l=_0x4b57d8[a(128)][a(135)].bind(_0x4b57d8);continue;case"5":l[a(158)]=k[a(158)][a(134)](k);continue;}break}});function _0x5d72(){var a=["12OxLWNm","iQpQh","kflkH","ZKKUI","667534ccSziA","cxHaT","apply","exception","mGXMz","trace","505212HIqOeb","wXwHa","AESxA","dmrEx","warn","{}.constructor(\"return this\")( )","4|1|3|0|5|2","tFtwJ","WOHHW","CXukZ","IyBiB","tWcdy","slow","log","error","bGYwr","constructor","55HEngqc","znGMG","EDtKT","AObBa","__proto__","bind","prototype","NJVot","sekTG","kJiOD","load",".preloader","10uneApm","diini",".smarttechmukesh-logo1","36600021EWBEIu","BCeZH","ckbGq","split","143677brybjL","9848216eyPgnf","hLUkZ","AchAH","info","vXCiZ","okFIk","GbyVS","length","2529753yrbOWY","toString","iHTqg","6700080ApxzVE","vbArm","console","hSQnc","bihyg","fadeOut","table","ltCiR","sYtYX"];return _0x5d72=function(){return a},_0x5d72()}_0x1752e4(),$(window)[_0x4c82fa(139)](function(){var a=_0x4c82fa,b={ltCiR:function(a,b){return a(b)},GbyVS:"slow",ZKKUI:a(143),hLUkZ:function(a,b,c){return a(b,c)},iQpQh:function(a,b){return a(b)},kJiOD:a(140),znGMG:function(a,b){return a!==b},AchAH:a(146),sekTG:function(a,b,c){return a(b,c)}};b[a(137)](setTimeout,function(){var c=a,d={vbArm:function(a,c){var d=_0x5d69;return b[d(170)](a,c)},CXukZ:b[c(138)],NJVot:b[c(155)]};if(b[c(130)](b[c(151)],b[c(151)])){var e={okFIk:function(a,d){return b[c(167)](a,d)},gGBGL:b[c(155)],cxHaT:b.ZKKUI,kflkH:function(a,b,c){return a(b,c)}};b[c(150)](_0x2b6586,function(){var a=c,b={bSxhj:function(a,b){var c=_0x5d69;return e[c(154)](a,b)},sYtYX:a(140),tWcdy:e.gGBGL};e.okFIk(_0x450984,e[a(174)])[a(165)](e.gGBGL),e[a(171)](_0x2dfee9,function(){var c=a;b.bSxhj(_0x77c4f6,b[c(168)]).fadeOut(b[c(123)])},500)},500)}else b[c(170)]($,b[c(172)])[c(165)](c(124)),b[c(137)](setTimeout,function(){var a=c;d[a(161)]($,d[a(121)])[a(165)](d[a(136)])},500)},500)});//]]></script>
Style 1 With Large Text Loading :-
<div class="preloader">
<div class="smarttechmukesh-logo1"><div class="smarttechmukesh-logo"><h1>M</h1></div></div></div>
Style 2 With Small Text Loading :-
<div class="preloader">
<div class="smarttechmukesh-logo1"><div class="smarttechmukesh-logo"><h1>M</h1></div></div></div>
Style 3 With Image Pre Loading :
<div class="preloader">
<div class="smarttechmukesh-logo1"><div class="smarttechmukesh-logo"><img src="https://1.bp.blogspot.com/-Wi0AsG-bPl8/YMDb-Gll6WI/AAAAAAAAA_k/nbMZD0U4TE0K2wxvv4vfcja7EL2m9UggQCPcBGAYYCw/s48/smarttechmukesh.png"/> </div></div></div>
Note : Customize The Marked Part as Per Your Requirement.
Conclusion :
In this post I have explained How To Add Preloader in Blogger. I Hope this tutorial can be useful for all Blogger. Thank You for Visiting Our Website.