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>,

<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>