FULL PAGE PRELOADER

head içerisindeki css kodlarımız şu şekilde;

<style type="text/css">
    .js div#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('img/loading.gif') no-repeat center center;
}

    </style>

<!--yukarıdaki css kodları ile loading gifimizi tam ortaladık, zeminimizi sayfayı tamamen kaplaması için %100 olarak ayarladık. 

Aynı zamanda z indeximizi en üste gelmesi için 999 yaptık(1000 nesne olamayacığını farzettik) -->

head içerisindeki jquery kodlarımız şu şekilde;

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <!--yukarıdaki satır jquery kütüphanesidir -->
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            $(window).load(function () {
                $('#preloader').fadeOut('slow', function () { $(this).remove(); });
            });

        });
</script>

<!-- sayfa yüklendiğinde çalışacak fonksiyonumuz, preloader isimli id seçiciyi ortadan kaldıracak, çünki sayfa yüklendi :)   -->

body içersindeki html kodlarımız şu şekilde;

 <div class="js">
 
    <div id="preloader"></div><!-- burası sayfa yüklendiğinde ortadan kaldırılacak-->
   
    <h1>    BAŞLIK</h1>
    
    <p>içerik</p>
    
    <p>içerik  </p>
    
    <p>içerik </p>
 
      <div>
        bu araya bolca resim koyarsan preloader ı izleme şansın artar
          <img src="wallpaper/wallpapers-20.jpg" />

 </div>
 
</div><!-- son HTML element-->

Kesin Çalışıyor, izlemek için aşağıdaki bağlantıyı tıklayınız, F5 yaparsanız tekrar tekrar inceleyebilirsiniz.

ÖNİZLE