sayfa yükleniyorYazı baştaki resimle pek bir alakasız oldu ancak görsele bu yazı ile ilgili arama yaparken rastgele bulup tamamen keyfi koydum 🙂 Şuan bu sitede de olduğu gibi sayfanın yüklenme olayına paralel olarak en üstte header diye tabir edilen kısmında ilerleyen bir kırmızı çubuk ve sonunda da bu ilerlemenin bitimine kadar devam edecek olan kırmızı bir daire göreceksiniz. Tam olarak ne anlatmak istediğimi daha iyi anlayın diye özellikle kırmızı desem de renklere takılmayın dört farklı renklerde(kırmızı, yeşil, sarı, mavi) kullanabileceksiniz. Tamamen css ve js kodlarıyla oluşturulmuş şık bir eklenti diyebiliriz, entegresi çok kolay olan sayfa yükleniyor barının indireceğiniz dosyalar içerisinde sıkıştrılımış js, ve css dosyaları da mevcuttur hızlı bir performans için optimize edilmiş halini kullanmanızı öneririm. Bu işlemin adı tam olarak nedir bilmiyorum; yükleniyor çubuğu, yükleme çubuğu, sayfa yüklenmesi veya bu kelime öbeklerini türeterek işlemin benzerlerini google’da bulmanız mümkündür.

 Sayfa Yükleme Çubuğu Kullanımı

Aşağıda kısaca en sade haliyle kullanımı örneklendirilmiştir.  <head> bölümünde css ve js dosyalarını çağırıp, <body>….</body> arasına preloader’ı ekledik.

<!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>

Sayfa Yükleniyor Çubuğuna İnce Ayar

Yukarıda gösterdiğim şekilde kullanırsanız varsayılan ayarlar ile kullanmış olursunuz. Özelleştirmek için

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

true: perdeyi açıp kapatır, kapatmak için false değeri verebilirsiniz.

black: bu kısımda perde rengini belirtiyoruz ikinci seçenek beyaz olan white seçeneğidir.

blue: bu da yükleniyor barının rengini ayarlar, yellow, red, green, blue yazarak renkleri değiştirebilirsiniz.

Öne çıkarmış olduğum alakasız görselin espirisine gelirsek; böyle yükleniyor ikonu mu olur lan kim yapmış bunu 🙂

Sayfa Yükleniyor

Sayfa Yükleniyor