Preloader.js ile Sayfalarınıza 'Yükleniyor' Barı

Adobewordpress gururla sunar : Preloader.js

Birçok takipçimizin YouTube’da kullanılan yükleniyor barının nasıl yapıldığını sorması üzerine sizlere özel bir plugin geliştirme gereği duyduk. Preloader ismini verdiğimiz bu jQuery eklentisi sayfanızın yüklenmesini hesaplayıp bu süre dahilinde dolan bir bar ve dönen bir spinner oluşturuyor.

Ayrıca isteğe bağlı olarak kırmızı, mavi, yeşil ve sarı gibi ana renklere bürünmekle kalmıyor, tercih edilirse yüklenme sırasında sitenizin üstünü siyah ve beyaz renkteki perdesiyle de örtüyor.

Adobewordpress ailesi olarak Cumhuriyet Bayramı‘nızı kutlarız. Ne mutlu Türküm diyene!

ÖRNEĞİ GÖRÜNTÜLE

Sayfanıza preloader.js ile yükleniyor barı ve spinner ekleyin.

Peki bu sistem nasıl çalışıyor? Öncelikle yapının jQuery tarafıyla başlayalım.

Web sitenize girildiği gibi preloader.js sitenizin body elemanı içerisine kendi elemanını ekliyor. Sonrasında sitenizin tamamı yüklenene kadar üst kısımda bir bar ve spinner yaratılıyor. Kullanıcının yanlış bir şeyi tıklama veya henüz yüklenmemiş içerikle etkileşim kurma gibi bir ihtimaline karşın isteğe bağlı olarak ekranın üstüne perde de atılıyor. Sonrasında sayfa yüklendiğinde tüm bu elemanlar tek tek yok oluyor ve tarayıcıdan siliniyor. Böylece sayfada en ufak bir yük bile oluşturmuyor.

preloader-js

Yapının kendisi CSS ve JavaScript kodlarından ibaret. Ek olarak minify edilmiş versiyonları da zip dosyasında geliyor.

jQuery ile çalışan bu yapı 1.0+ tüm versiyonları destekliyor. Ayrıca CSS kodlarının da cross-browser yazılması sayesinde birçok popüler tarayıcıda sorunsuz çalışıyor.

Nasıl çalışır? Siteme nasıl eklerim?

Yapmanız gereken şey çok basit. Web sayfanızın <head> elemanı içerisine preloader’in CSS ve JS dosyalarını tanıtıyoruz. Sonrasında da sitenizin en altına yani <body> elemanını kapattığınız yerde fonksiyonumuzu çağırıyoruz.

İşte örnek kullanım.

<!doctype html>

<html>
<head>
  <link rel="stylesheet" href="preloader.css">

  <!-- jQuery ve preloader.js'yi yükleyelim -->
  <script src="jquery.js"></script>
  <script src="preloader.js"></script>
  <![endif]-->
</head>

<body>
  <script>
    preloader();
  </script>
</body>
</html>

Preloader.js’yi Yükle

Preloader’ı şimdi ücretsiz olarak yüklemek için aşağıdaki butonu tıklayın.

DOSYAYI İNDİR

Bu da ilginizi çekebilir Yıldızlarla Yükleniyor Animasyonu (Spinner)

Nasıl özelleştirilir?

Preloader.js’nin renk, perde ekleme ve perde rengi gibi özelliklerini istediğiniz gibi yönetebilirsiniz.

preloader(Perde, Perde Rengi, Bar & Spinner Rengi);

Örneğin aşağıdaki tanım bize siyah renkte bir perdenizin üzerinde mavi bir loading bar ve spinner oluşturur.

preloader(true, 'black', 'blue');

Şimdi tüm sınıfları detayları ile tanıyalım.

Perde	true : Perdenin gözükmesini sağlar. false : (varsayılan) Perdenin gizlenmesini sağlar.
Perde Rengi	black : Perdeyi siyah yapar. white : (varsayılan) Perdeyi beyaz yapar.
Bar & Spinner Rengi	red : (varsayılan) Elemanları kırmızı yapar. blue : Elemanları mavi yapar. green : Elemanları yeşil yapar. yellow : Elemanları sarı yapar.