Cara Membuat Animasi Loading Di Blog

Posted by Wahyu basofii on Kamis, 21 Maret 2013

Kali ini saya akan memberikan tutorial cara membuat animasi Loading di blog. Tutorial ini saya dapatkan di Om-Dayz blog, kalau menurut blog Om-Dayz "Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat". Daripada bingung mending langsung saja ke caranya.. :)

Pasang CSS Animasi Loading
Taruh kode CSS berikut di atas kode ]]></b:skin>


#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Pasang JQuery Terbaru
pasang script jquery 1.7.2 tepat di atas tag </head> atau kalau ada JQuery terbaru, silahkan pasang yang terbaru.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Pasang Script Loading Animasi
Letakkan kode berikut tepat di atas tag </body>


<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>
Keterangan :
untuk yang ingin menyesuaikan warna loading nya dengan warna lain,bisa mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna biru muda dengan kode warna yang diinginkan.
  • Jika ingin memilih kode warna bisa dilihat disini
Sekian Tutorial saya tentang Cara Membuat Animasi Loading Di Blog, Dan jangan lupa tinggalkan jejak  :D 

Source : Hack4rt

Judul : Cara Membuat Animasi Loading Di Blog
Label :
URL : http://wahyu-only.blogspot.com/2013/03/cara-membuat-animasi-loading-di-blog.html

18 komentar:

  1. Panjang bener sob kode scriptnya :D di tunggu visitbacknya :)

    BalasHapus
    Balasan
    1. .Hehe..iya sob panjang..

      .ok,langsung ke tkp..

      Hapus
  2. mau pake si diblogku, tapi blogku udah berat bangett...
    kebanyakan kode kodeee.. huhuuu

    BalasHapus
    Balasan
    1. iya,Mendingan jgn dipake mbak,dripada berat loadingnya..

      Hapus
  3. dah lama cari tips bikin loading ini... makasih ya...

    BalasHapus
  4. makasih ya sob.. infonya sgt bermanfaat...

    BalasHapus
    Balasan
    1. Masama sob :) makasih kunjungannya

      Hapus
  5. ini yang saya cari.. kunjungan balik sob ke blog ku (c) :d

    BalasHapus
  6. sip mantab.. sudah ane terapin mas :D

    BalasHapus
  7. wahhhh thx bget ni atas info ny
    ntar aku coba
    visit blogku ya jangan lupa tinggalkan comment
    http://www.vzshare.blogspot.com
    ntar ak visit blog kalian n tinggalin comment

    BalasHapus
  8. kagak bisa di blog ane gan. apa mungkin ada yang terlupa ya..

    BalasHapus
    Balasan
    1. kalo di blog sobat sudah ada jQuery gak usah dipasang lagi...

      Hapus
  9. Cakep Sob


    Mohon Kunjungan Di

    http://autodidakku.blogspot.com

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter