Cara Membuat Preloader Keren Seperti Agregrid

Karena kemarin ada yang reques untuk membuat preloader seperti agregrid blogger template, maka akan saya buatkan tutorialnya.

Related Post di tengah Artikel

Oke saya ngga mau basa basi berikut ini adalah tutorial cara membuat preloader untuk blog kalian.

Pertama silakan kalian copy kode dibawah ini


     <div class="preloader" id='danilload'>
    <div class="rounder"></div>
      </div>

Copy kode diatas dan letakkan dibawah <body>

Cara Deffer JavaScript

Selanjutnya copy kode dibawah ini


.preloader {
    background: #ffffff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.rounder {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -26px 0 0 -26px;
    font-size: 10px;
    border-right: 5px solid #333333;
    border-left: 5px solid #1abc9c;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    z-index: 10000;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

Selanjutnya letakkan kode tersebut dibawah tag <b:skin> atau dibawah tag <style>

Selanjutnya adalah menerapkan javascript untuk preloader ini
copy code dibawah ini kalau di template kalian ada jquery nya :


  <script>
    $(document).ready(function(){
      $(window).load(function () {
        $('.preloader').delay(800).fadeOut('slow');
      });
    });
  </script>

Kalau belum ada jquery nya bisa pakai script dibawah ini :


  <script>
          document.getElementById("danilload").style.display = "none";
  </script>

Nah simpan javascriptnya sebelum kode </body>

Silakan simpan kemudian coba buka blog agan, maka pre loader akan berjalan. Kalau kalian sudah memakai jquery tapi jquery nya kalian jadikan asynchronous maka gunakan script yang kedua. Karena kalau pakai yang pertama loadernya ngga berenti berenti, kadang berenti sih. Tapi saya sarankan pakai yang kedua aja kalau di buat asynchronous tapi kalau engga ya pakai yang pertama aja.

Untuk demo silakan lihat di template saya disini.

Sekian post kali ini semoga bermanfaat.

Cara Membuat Preloader Keren Seperti Agregrid

0 Response to "Cara Membuat Preloader Keren Seperti Agregrid"

Post a Comment