Benzer Konular
Daha önce hiç yükleniyor animasyonu ile karşılaştınız mı? Bu kod sayesinde sitenize yükleniyor efekti verebilirsiniz.
Yükleniyor efekti nedir, ne için kullanılır?
Yükleniyor efekti, ilk resme benzer animasyonları siteniz yükleniyorken ziyaretçilere gösterir. Bu animasyon, web siteleri için oldukça faydalıdır.
Eğer web sitenizin yükleme süresi çok uzunsa, ziyaretçiler web sitenizin kapalı olduğunu düşünebilir ve sitenizden ayrılabilir. Ancak bir yükleme efekti eklemeniz durumunda ziyaretçiler web sitenizin şu anda yüklenmekte olduğunu görecek ve beklemeye devam edecektir.
Yükleme efekti eklemenin oldukça fazla yolu olsa dahi, size yazımızda anlatacağımız yöntem ile web sitenizin açılış hızında büyük değişiklikler olmadan bu kodu kullanabileceksiniz.
Ayrıca bu efektlerden tercih alanınızı genişletmek için pek çok versiyonunu ekledik, seçtiğiniz animasyonu yorumlarda paylaşabilirsiniz. Şimdi, bu kodu sitenize nasıl ekleyebilirsiniz bundan bahsedelim.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> Eğer buraya kadarki işlemlerde sorun yaşamadıysanız, devam edebiliriz. Blogger panelinden Tema ve HTML'yi düzenle tuşuna basarak aşağıdaki kodu </body> kodunun hemen üstüne eklemelisiniz.
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]> </script>Üstteki kodu ekledikten sonra, aşağıdaki kodu </body> kodunun hemen altına ekleyin.
 |
| Örnek bir loading ekranı |
<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>Daha sonra, CTRL+F yolu ile </head> kodunu aratıp hemen üstüne aşağıdaki kodu ekliyoruz.
<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>Bundan sonra Temayı kaydet diyoruz ve temamızı görüntülüyoruz. Ve tüm işlem bu kadardı sevgili dostlar. Web sitenize girdiğinizde kodun başarılı bir şekilde çalıştığını görebilir, sitenizin aynı hız ile açıldığını görebilirsiniz.
Bir hız farkının olmamasını kodların CSS ve SVG şeklinin oldukça saf olmasıdır. Eğer sadece yukarıda bahsettiğimiz yükleniyor kodunu beğenmediyseniz aşağıdaki bağlantıdan geri kalan yükleniyor kodlarını bulabilir ve sitenize ekleyebilirsiniz.
