Blogger blog sitesi yöneticilerinin sayfa geçiş ve yüklenme süreleri zaman diliminde bir ön yükleme efekti eklentisi kullanmak istiyor. Bu yazımızda blog sitelerinin sayfaları arka planda yüklenirken sayfanızın yüklendiğini gösteren ön yükleme eklentisinin blog sitesine nasıl eklendiği ve nasıl çalıştığı hakkında bilgiler paylaşacağım.
Blog sitesi sayfa yüklenme süresi 2 (iki) saniyenin üzerindeyse, bir sayfa ön yükleme bilgi eklentisi kullanabilirsiniz. Eğer, blog sayfaları 2 (iki) saniye veya daha az sürede yükleniyorsa, bir ön yükleme bilgi eklentisi kullanmanıza gerek yoktur.
Sayfa ön yükleme eklentisi, blog sitenizin sayfaları arka planda yüklenirken ön yükleme sayfasında blog sayfanızın yüklendiği hakkında ziyaretçilere bilgi verir ve sayfa yüklendiğinde otomatik olarak kapanır.
Blogger Özel Önyükleme Ekranı Oluşturma
Paylaşmış olduğum sayfa ön yükleme eklentileri CSS3 ve basit bir javascrip kodu ile çalışmakta ve blog sayfalarının yüklenme hızını olumsuz yönde etkilemez. Blog sitenize bir sayfa ön yükleme eklentisi kurmak istiyorsanız aşağıdaki adımları takip edin.
Blogger Bloglarına Sayfa Ön Yükleme Eklentisi Nasıl Kurulur?
Blogger hesabınıza giriş yapın yapın ve blogunuzun kumanda panelinde bulunan Tema > HTML'i Düzenle yolunu takip ederek tema editör sayfasını açın ve aşağıdaki adımları uygulayın.
jQuery 1.7.1 Sürümü
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Blogger sayfa ön yükleme eklentileri jQuery 1.7.1 sürümü ile çalışır. Bu nedenle, tema editör sayfanızda bulunan Google Apis jQuery kodunu yukarıdaki sürümü ile değiştirin.
Aşağıdaki sayfa ön yükleme kodlarını tema editör sayfanıza sırasıyla aşağıdaki sıralamaya uygun şekilde ekleyin.
- Sayfa ön yükleme CSS kodunu </head> veya </head><!--<head/>--> kodunun bir satır üzerine ekleyin.
- Sayfa ön yükleme HTML kodunu <body> kodunun bir satır altına ekleyin.
- Sayfa ön yükleme jQuery kodunu </body> veya <!--</body>--></body> kodunun bir satır üzerine ekleyin.
Sayfa Ön Yükleme Eklentileri
Blog siteniz için en uygun olan ön yükleme eklentisini seçerek blogunuza kurulumunu yapın. Her eklenti için ayrı ayrı CSS, HTML ve jQuery kodu bulunmaktadır.
Sayfa Ön Yükleme Eklentisi - 1
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#preloader{overflow:hidden;background:#fff;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{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #f44336;top:50%;animation:loader 2s infinite ease}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#f44336;animation:loader-inner 2s infinite ease-in}
@keyframes loader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}
/*]]>*/
</style>HTML
<div id='preloader'>
<div class='spinner'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 2
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}
.loader-spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}
.loader-spinner,.loader-spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}
.loader-spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}
.loader-spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}
@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}
@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}
@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}
@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
/*]]>*/
</style>HTML
<div id="PreLoader">
<div class="loader-spinner">
<div class="loader-spinner-inner"></div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-spinner").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 3
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#000;color:#eaf8ff;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;font-family:Verdana,sans-serif!important}
@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}
@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}
@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}
@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}
@-webkit-keyframes loader-bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}
@-moz-keyframes loader-bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}
@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}
@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}
.loader-wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}
.loader-bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:loader-bg 1.5s linear infinite;-webkit-animation:loader-bg 1.5s linear infinite;animation:loader-bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px #000;-webkit-box-shadow:inset 0 0 45px 30px #000;box-shadow:inset 0 0 45px 30px #000}
.pre-loading{position:relative;margin:0 auto;text-align:right;text-shadow:0 0 6px #bce5ff;height:20px;width:150px}
.pre-loading span{position:absolute;display:block;right:30px;height:20px;width:400px;line-height:20px}
.pre-loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf6ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px #bce5ff;box-shadow:0 0 15px #bce5ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}
.pre-loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}
.pre-loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class="loader-wrap">
<div class="loader-bg">
<div class="pre-loading">
<span class="title">Yükleniyor...</span>
<span class="text"><data:blog.title/></span>
</div></div></div></div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-wrap").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 4
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000}
.loader-juggle{width:300px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px}
.loader-juggle div{position:absolute;width:21px;height:21px;border-radius:10.5px;background:#4285f4;margin-top:150px;margin-left:150px;animation:juggle 2.1s linear infinite}
.loader-juggle div:nth-child(1){background:#34a853;animation-delay:-0.7s}
.loader-juggle div:nth-child(2){background:#fbbc05;animation-delay:-1.4s}
@keyframes juggle{0%{transform:translateX(0px) translateY(0px)}12.5%{transform:translateX(25px) translateY(-55px) scale(1.1);background:#ea4335}25%{transform:translateX(50px) translateY(0px);animation-timing-function:ease-out}37.5%{transform:translateX(25px) translateY(55px)}50%{transform:translateX(0px) translateY(0px)}62.5%{transform:translateX(-25px) translateY(-55px) scale(1.1);animation-timing-function:ease-in}75%{transform:translateX(-50px) translateY(0px);animation-timing-function:ease-out}87.5%{transform:translateX(-25px) translateY(55px)}100%{transform:translateX(0px) translateY(0px)}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='loader-juggle'>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
<div class='loader-ball'></div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-juggle").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 5
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}
.loader-spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:loader-spinner-wiggle 1.2s infinite}
@keyframes loader-spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}
.loader-spinner:before,.loader-spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:loader-spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,loader-spinner-fade 1.2s linear infinite}
.loader-spinner:before{border-top-color:#66e5ff}
.loader-spinner:after{border-top-color:#f0db75;animation-delay:0.3s}
@keyframes loader-spinner-spin{100%{transform:rotate(360deg)}}
@keyframes loader-spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class="loader-spinner"></div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-spinner").fadeOut("slow");setTimeout(function(){$("# PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 6
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000}
.loader-balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}
.loader-balls:nth-child(1){background-color:#2196F3;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}
.loader-balls:nth-child(2){background-color:#F44336;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}
.loader-balls:nth-child(3){background-color:#FFC107;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}
.loader-balls:nth-child(4){background-color:#4CAF50;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}
@keyframes move{0%{left:0%}100%{left:100%}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
<div class='loader-balls'></div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-balls").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 7
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner-inner{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:#ea4335}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>HTML
<div id='PreLoader'>
<svg class='spinner-inner' height='48px' viewBox='0 0 66 66' width='48px'><circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='6'/></svg>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-inner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 8
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#000;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#loader-do{background:#fff;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:loader-do .6s ease-in-out infinite}
@-webkit-keyframes loader-do{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)}}
.loader-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}}
#step-1{animation:anim 1.8s linear infinite}
#step-2{animation:anim 1.8s linear infinite -.6s}
#step-3{animation:anim 1.8s linear infinite -1.2s}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div id='loader-container' class='spinner-inner'>
<div id='loader-do'></div>
<div class='loader-step' id='step-1'></div>
<div class='loader-step' id='step-2'></div>
<div class='loader-step' id='step-3'></div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-inner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 9
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#fff;position:fixed;overflow:hidden;left:0;right:0;top:0;bottom:0;z-index:9999}
.spinner-wrap{position:absolute;list-style:none;margin:0;padding:0;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{position:absolute;height:0;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b7ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b9ccd}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='spinner-wrap'>
<ul class='loading reversed'>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-wrap").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 10
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner-wrap{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader-balls{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-ball{animation-name:loader-balls;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-ball:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-ball:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-ball:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-ball:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-ball:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-ball:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader-balls{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='spinner-wrap'>
<div class='loader-balls'>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
<div class='moving-ball'></div>
</div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-wrap").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 11
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{position:absolute;top:50%;left:50%;width:200px;height:200px;margin-top:-100px;margin-left:-100px}
.loader > .steps{position:absolute;top:50%;left:50%;z-index:10;width:160px;height:100px;margin-top:-50px;margin-left:-80px;border-radius:5px;background-color:#1e3f57;transform-type:preserve-3d;animation:steps1 3s cubic-bezier(.55,.3,.24,.99) infinite}
.loader > .steps:nth-child(2){z-index:11;width:150px;height:90px;margin-top:-45px;margin-left:-75px;border-radius:3px;background-color:#3c617d;animation-name:steps2}
.loader > .steps:nth-child(3){z-index:12;width:40px;height:20px;margin-top:50px;margin-left:-20px;border-radius:0 0 5px 5px;background-color:#6bb2cd;animation-name:steps3}
@keyframes steps1{3%,97%{width:160px;height:100px;margin-top:-50px;margin-left:-80px}30%,36%{width:80px;height:120px;margin-top:-60px;margin-left:-40px}63%,69%{width:40px;height:80px;margin-top:-40px;margin-left:-20px}}
@keyframes steps2{3%,97%{width:150px;height:90px;margin-top:-45px;margin-left:-75px}30%,36%{width:70px;height:96px;margin-top:-48px;margin-left:-35px}63%,69%{width:32px;height:60px;margin-top:-30px;margin-left:-16px}}
@keyframes steps3{3%,97%{width:40px;height:20px;margin-top:50px;margin-left:-20px}30%,36%{width:8px;height:8px;margin-top:49px;margin-left:-5px;border-radius:8px}63%,69%{width:16px;height:4px;margin-top:-37px;margin-left:-8px;border-radius:10px}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='loader spinner'>
<div class='steps'></div>
<div class='steps'></div>
<div class='steps'></div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 12
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="balls-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.balls-1{z-index:-1;background-color:#2196F4;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.balls-2{z-index:-2;background-color:#03A9F5;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.balls-3{z-index:-3;background-color:#00BCD5;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.balls-4{z-index:-4;background-color:#009689;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.balls-5{z-index:-5;background-color:#4CAF51;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.balls-6{z-index:-6;background-color:#8BC35A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.balls-7{z-index:-7;background-color:#CDDC38;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.balls-8{z-index:-8;background-color:#FFEB4B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='spinner'>
<span class='balls-1'></span>
<span class='balls-2'></span>
<span class='balls-3'></span>
<span class='balls-4'></span>
<span class='balls-5'></span>
<span class='balls-6'></span>
<span class='balls-7'></span>
<span class='balls-8'></span>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 13
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#ecf0f2;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.gge{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b5ff;width:0;z-index:2}
.gge2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde16;width:0;z-index:1}
.gge3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da159;border-bottom:0 solid transparent;width:0;z-index:1}
.gge4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea344f;border-bottom:0 solid transparent;width:0;z-index:2}
.circa{border:30px solid rgba(255,255,255,0.1)}
.circa2{margin-top:30px;border:25px solid #fff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div class='spinner'>
<div class='loader gge'></div>
<div class='loader gge2'></div>
<div class='loader gge3'></div>
<div class='loader gge4'></div>
<div class='loader circa'></div>
<div class='loader circa2'></div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Sayfa Ön Yükleme Eklentisi - 14
CSS
HTML
jQuery
<style type='text/css'>
/*<![CDATA[*/
#PreLoader{background:#f5f5fa;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader-status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}
.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}
.spinner > div{background-color:#4267b3;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.spinner .rct2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.spinner .rct3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}
.spinner .rct4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}
.spinner .rct5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}
@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}
@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}
/*]]>*/
</style>HTML
<div id='PreLoader'>
<div id='loader-status'>
<div class='spinner'>
<div class='rct1'></div>
<div class='rct2'></div>
<div class='rct3'></div>
<div class='rct4'></div>
<div class='rct5'></div>
</div>
</div>
</div>jQuery
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Blogger siteleri için birbirinde farklı sayfa ön yüklenme eklentilerini sizlerle paylaştım. Bu yazımızda paylaşılan eklentiler hakkında görüş ve sorularınız için yorum formunu kullanabilirsiniz.
Yorum Gönder