 |
| Blogger İçin Sayfa Ön Yükleme Eklentileri ( 14 Adet Farklı Tasarım ) |
Eklenti , eğer blog sayfasının yüklenmesi 2 saniyeden uzun sürüyorsa , seçtiğiniz tasarıma sahip yükleniyor sayfası ile okuyucularınızı karşılayacak bu şekilde ziyaretçilerinizi sayfanın yüklendiği hakkında bilgilendirebileceksiniz.
Blogger Bloglarına Sayfa Ön Yükleme Eklentisi Nasıl Kurulur ?
1. Adım : Paylaşılan eklenti jQuery 1.7.1 ve üzeri sürümlerde çalıştığından öncelikle temanızdaki Google Apis jQuery kodunu değiştirmemiz gerekiyor.
Bunun için blogger kontrol panelinden " Tema>HTML'yi düzenle " yollarını takip ederek blog şablon kodlarınıza ulaşın ve kodlar içerisinde ajax.googleapis kelimesini aratarak aşağıdaki kod dizinine benzer kodu bulun ve tamamını aşağıdaki ile değiştirin.
jQuery 1.7.1 Sürümü
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Burada dikkat etmeniz gereken yukarıdaki tüm kod dizinini , blogunuzda bulmuş olduğunuz kodların tamamı ile değiştirmektir.Altına veya üstüne ekleme yapmayın, vermiş olduğum kod dizinin aynısını bulup yerine 1.7.1 sürüm kodlarını ekleyin.
Sürüm güncellemesini yaptıktan sonra , vereceğim 14 adet farklı tasarımın hepsinin kendine ait ayrı ayrı CSS , HTML ve jQuery kodları bulunmaktadır. Bu yüzden önce tasarımınızı seçin , ve tasarıma ait kodları aşağıdaki sıra ile blog şablon kodlarınız arasına ekleyin.
- Seçmiş olduğunuz tasarıma ait sayfa ön yükleme CSS kodunu </
head>kodunun bir satır üzerine ekleyin. - Seçmiş olduğunuz tasarıma ait sayfa ön yükleme HTML kodunu <
body>kodunun bir satır altına ekleyin. - Seçmiş olduğunuz tasarıma ait sayfa ön yükleme jQuery kodunu </
body>kodunun bir satır üzerine ekleyin.
Sayfa Ön Yükleme Eklentisi Tasarımları
14 farklı tasarım içerisinden istediğinizi seçin ve yukarıdaki adımlara göre blog sitenize ekleyin.
1.Tasarım Sayfa Ön Yükleme Eklentisi
1.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<div id='preloader'>
<div class='spinner'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>
jQuery Kodları
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
2.Tasarım Sayfa Ön Yükleme Eklentisi
2.TASARIM KODLARI
CSS KODU
<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 KODU
<div id="PreLoader">
<div class="loader-spinner">
<div class="loader-spinner-inner"></div>
</div>
</div>
jQuery Kodu
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-spinner").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>
3.Tasarım Sayfa Ön Yükleme Eklentisi
3.TASARIM KODLARI
CSS KODU
<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 KODU
<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 KODU
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-wrap").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>
4.Tasarım Sayfa Ön Yükleme Eklentisi
4.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-juggle").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>
5.Tasarım Sayfa Ön Yükleme Eklentisi
5.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<div id='PreLoader'>
<div class="loader-spinner"></div>
</div>
jQuery KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-spinner").fadeOut("slow");setTimeout(function(){$("# PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>
6.Tasarım Sayfa Ön Yükleme Eklentisi
6.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){setTimeout(function(){$(".loader-balls").fadeOut("slow");setTimeout(function(){$("#PreLoader").fadeOut("slow")},1000)},1000)});
//]]>
</script>
7.Tasarım Sayfa Ön Yükleme Eklentisi
7.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-inner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
8.Tasarım Sayfa Ön Yükleme Eklentisi
8.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-inner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
9.Tasarım Sayfa Ön Yükleme Eklentisi
9.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<div id='PreLoader'>
<div class='spinner-wrap'>
<ul class='loading reversed'>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
jQuery KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-wrap").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
10.Tasarım Sayfa Ön Yükleme Eklentisi
10.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner-wrap").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
11.Tasarım Sayfa Ön Yükleme Eklentisi
11.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<div id='PreLoader'>
<div class='loader spinner'>
<div class='steps'></div>
<div class='steps'></div>
<div class='steps'></div>
</div>
</div>
jQuery KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
12.Tasarım Sayfa Ön Yükleme Kodları
12.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
13. Tasarım Sayfa Ön Yükleme Eklentisi
13.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
14.Tasarım Sayfa Ön Yükleme Eklentisi
14.TASARIM KODLARI
CSS KODLARI
<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 KODLARI
<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 KODLARI
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
14 farklı tasarımdan önizleme ile istediğinizi seçebilir ve kendi blogunuza ekleyebilirsiniz. Herhangi bir soru veya sorunda yorum kısmından bana ulaşmanız mümkün. Buraya kadar okuduğunuz için teşekkür ederim😊
Hiç yorum yok:
Yorum Gönder
Yorumlarınız benim için çok değerlidir , lütfen yorum yapınız.