Membuat Css Animasi Loading Di blog

Cara Membuat Animasi Loading Blog Dengan CSS - Loading CSS Animation. Mbah SERP kali ini mempunyai Trik Blogger Keren ,, Animasi Loading Animation Ini berfungsi Menipulasi Loading Blog Sobat Supaya Terlihat Wus Wus :D .CSS ini saya Nemu Saat Lagi Blogwalking Ke blognya Om Days,,Yaps Artikel Ini saya Salin Ke blog Saya , Karna Saya Lihat Mungkin Trik  Ini  sanagat Bermanfaat Bagi Teman Teman Dan Bagi Saya Tentunya ..

Mungkin Sobat Yang Berminat Bisa Gelar Tikar Dan Ikuti Tutorial Di bawah Ini ya . . :D

TambahKan Code CSS Anime Loading Page Dibawah ini Dan Letakan Diatas Kode ]]></b:skin>

Code CSS

#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 rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:
50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);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 rgb(240 ,0 , 0);border-left:5px solid transparent;
border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);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 rgb(255, 0, 0)}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 rgb(255, 0, 0)} 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); }}

 Lalu Tambahkan JQuery ini Diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Dan Yang Langkah Terakhir , pasang Script Dibawah Ini Tepat Diatas Tag </body>

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

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

 Kemudian Disave Deh ..
Gimana Mennurut Kalian ,, Bagus Gak CSS nya ... Memang Bener Bener Kreatif ya Om days .. ckckck
Selamat Mencoba Sobat .

Read More »

Add Comment

Unknown CSS