Cara Membuat Loading Page Animasi Unik Bola Bergaya Kontras

Testimoni, baca dulu ‘kumpulan tutorial membuat loading page animasi blog cepat, komplit!’. Animasi loading page balutan CSS3 berbentuk lingkaran yang beberapa bagiannya bewarna merah dan kuning. Gaya animasi page blog ini bergerak cepat mengarah seperti jarum jam dan kemudian berbalik arah putaran. Cara penerapannya, sobat langsung ke Template, mengklik Edit HTML:

Cara Membuat Loading Page Animasi Bola Kontras (Foto: screenshoot)

1. Copy script Jquery berikut, jika telah ada sebelumnya lewati langkah ini.
    Paste Jquery di atas kode </head>,

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

2. Letakan kode CSS berikut di atas kode ]]></b:skin>,

     /* X-Gen Loader */
    #xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

    #load2 body {
        background-image: url(../images/hexabump.png);
        background-color: #222;
    }
    #load2 body:after {
        content: "";
        z-index: -1;
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
        background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
    }
    #load2 .spinner {
        position: relative;
        font-size: 100px;
        width: 1em;
        height: 1em;
        margin: 100px auto;
        border-radius: 50%;
        background: #123456;
        box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
        background:
            -webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
            -webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
        background:
            -moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            -ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            -o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            -o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background:
            linear-gradient(#ea2d0e 50%, #ffdd72 50%),
            linear-gradient(#ffdd72 50%, #ea2d0e 50%);
        background-size: 50% 100%, 50% 100%;
        background-position: 0 0, 100% 0;
        background-repeat: no-repeat;
        opacity: 0.7;
        -webkit-animation: mask 3s infinite alternate;
        -moz-animation: mask 3s infinite alternate;
        -ms-animation: mask 3s infinite alternate;
        -o-animation: mask 3s infinite alternate;
        animation: mask 3s infinite alternate;
    }

    @-webkit-keyframes mask {
        25%  { -webkit-transform: rotate(270deg); }
        50%  { -webkit-transform: rotate( 90deg); }
        75%  { -webkit-transform: rotate(360deg); }
        100% { -webkit-transform: rotate(180deg); }
    }
    @-moz-keyframes mask {
        25%  { -moz-transform: rotate(270deg); }
        50%  { -moz-transform: rotate( 90deg); }
        75%  { -moz-transform: rotate(360deg); }
        100% { -moz-transform: rotate(180deg); }
    }
    @-ms-keyframes mask {
        25%  { -ms-transform: rotate(270deg); }
        50%  { -ms-transform: rotate( 90deg); }
        75%  { -ms-transform: rotate(360deg); }
        100% { -ms-transform: rotate(180deg); }
    }
    @-o-keyframes mask {
        25%  { -o-transform: rotate(270deg); }
        50%  { -o-transform: rotate( 90deg); }
        75%  { -o-transform: rotate(360deg); }
        100% { -o-transform: rotate(180deg); }
    }
    @keyframes mask {
        25%  { transform: rotate(270deg); }
        50%  { transform: rotate( 90deg); }
        75%  { transform: rotate(360deg); }
        100% { transform: rotate(180deg); }
    }

3. Posisikan JavaScript berikut di bawah kode <body>,

<!-- Start Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
    setTimeout(function() {
        $('#xgenloader-screen').fadeOut();
    }, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="load2"><div class="spinner">
    <i class="sphere"></i>
</div></div>
</div>
<!-- End Loader -->

4. Selesai, tekan tombol Simpan Template. Jika langkah dirasa sudah benar, review hasilnya.
    Selamat mencoba, happy blogging

Baca juga:
1. Buat Loading Page Animasi Blog Dinamis
2. Cara Memasang Loading Page Animasi Blog ‘Mondar-mandir’
3. Loading Page Animasi Cincin ‘Muter-muter’
4. Tutorial Loading Animasi Blog Mirip Startup Windows 8
5. Tips Membuat Loading Animasi Bola Loncat-loncat
6. Cara Pasang Animasi Loading Page Blog Kota-kotak Cantik

Description: Cara Membuat Loading Page Animasi Unik Bola Bergaya Kontras Rating: 3.5 Reviewer: Unknown ItemReviewed: Cara Membuat Loading Page Animasi Unik Bola Bergaya Kontras