• Home
  • Tutorial Keamanan
  • Tutorial Blogging
  • Tips Kesehatan
  • Unik
  • Template Blogspot
  • Contact
  • Technology Tower
    Home » tutorial blog » Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader

    Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader

    Posted by Andi Saputra Posted on Sabtu, Februari 09, 2013 with 55 comments
    Hai sob, apa kabar? Berhubung blog Technology Tower baru saja mengganti template dan kebetulan template ini memakai animasi loading halaman, maka saya akan berbagi Tutorial untuk membuat animasi loading tersebut, Tutorial Membuat Animasi Loading Blog dengan CSS3 dalam 6 Variasi Loader.

    membuat animasi loading blog dengan css

    Ok, langsung aja di simak tutorial ini 

    1. Masuk ke Dashboard Blogger, klik Template lalu pilih Edit HTML
    2. Ini adalah point terpenting, pertama cek dulu template blogmu apakah sudah ada script jquery didalamnya atau belum, jika belum ada silahkan copy kode ini: 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
     dan pastekan tepat diatas kode  <b:skin><![CDATA[
    3. Ikuti petunjuk dibawah ini sesuai dengan style animasi loading yang kamu suka

    # Style 1
    membuat animasi loading blog css3
    Demo

    Masukkan Kode berikut tepat diatas 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;}
    /* DEMO 1 */
    #horizontal-load 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.5));
        background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
        background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
        background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
        background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
    }
    #horizontal-load .bar {
    font-size: 20px;
        width: 10em;
        height: 1em;
        position: relative;
        margin: 100px auto;
        border-radius: .5em;
        background: rgba(255,255,255,0.6);
        box-shadow:
            0 0 0 .05em rgba(100,100,100,0.075),
            0 0 0 .25em rgba(0,0,0,0.1),
            inset 0 .1em .05em rgba(0,0,0,0.1),
            0 .05em rgba(255,255,255,0.7);
    }
    #horizontal-load .bar:after {
        content: "Please wait.";
        position: absolute;
        left: 25%;
        top: 150%;
        font-family: 'Carrois Gothic', sans-serif;
        font-size: 1em;
        color: #555;
        text-shadow: 0 .05em rgba(255,255,255,0.7);
    }
    #horizontal-load .bar .sphere {
        border-radius: 50%;
        width: 1em;
        height: 100%;
        background: -webkit-linear-gradient(#eee, #ddd);
        background: -moz-linear-gradient(#eee, #ddd);
        background: -ms-linear-gradient(#eee, #ddd);
        background: -o-linear-gradient(#eee, #ddd);
        background: linear-gradient(#eee, #ddd);
        box-shadow:
            inset 0 .15em .1em rgba(255,255,255,0.3),
            inset 0 -.1em .15em rgba(0,0,0,0.15),
            0 0 .25em rgba(0,0,0,0.3);
        display: block;
        -webkit-animation: slide 1.75s ease-in-out infinite alternate;
        -moz-animation: slide 1.75s ease-in-out infinite alternate;
        -ms-animation: slide 1.75s ease-in-out infinite alternate;
        -o-animation: slide 1.75s ease-in-out infinite alternate;
        animation: slide 1.75s ease-in-out infinite alternate;
    }
    @-webkit-keyframes slide {
        to { margin-left: 90%; }
    }
    @-moz-keyframes slide {
        to { margin-left: 90%; }
    }
    @-ms-keyframes slide {
        to { margin-left: 90%; }
    }
    @-o-keyframes slide {
        to { margin-left: 90%; }
    }
    @keyframes slide {
        to { margin-left: 90%; }
    }

    Lalu letakkan kode berikut tepat dibawah 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="horizontal-load"><div class="bar">
    <i class="sphere"></i>
    </div></div>
    </div>
    <!-- End Loader -->

    Klik Pratinjau, kalau loading muncul silahkan simpan template

    # Style 2

    membuat animasi loading blog css3
    Demo

    Masukkan Kode berikut tepat diatas 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); }
    }

    Lalu letakkan kode berikut tepat dibawah 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 -->


    Klik Pratinjau, kalau loading muncul silahkan simpan template

    # Style 3
    membuat animasi loading blog css3
    Demo

    Masukkan Kode berikut tepat diatas 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;}
    #bowlG{
    position:relative;
    width:128px;
    height:128px;margin:20% auto;
    }
    #bowl_ringG{
    position:absolute;
    width:128px;
    height:128px;
    border:11px solid #5C5C5C;
    -moz-border-radius:128px;
    -webkit-border-radius:128px;
    -ms-border-radius:128px;
    -o-border-radius:128px;
    border-radius:128px;
    }
    .ball_holderG{
    position:absolute;
    width:34px;
    height:128px;
    left:47px;
    top:0px;
    -moz-animation-name:ball_moveG;
    -moz-animation-duration:1.3s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:linear;
    -webkit-animation-name:ball_moveG;
    -webkit-animation-duration:1.3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    -ms-animation-name:ball_moveG;
    -ms-animation-duration:1.3s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-timing-function:linear;
    -o-animation-name:ball_moveG;
    -o-animation-duration:1.3s;
    -o-animation-iteration-count:infinite;
    -o-animation-timing-function:linear;
    animation-name:ball_moveG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    }
    .ballG{
    position:absolute;
    left:0px;
    top:-30px;
    width:51px;
    height:51px;
    background:#FF0000;
    -moz-border-radius:43px;
    -webkit-border-radius:43px;
    -ms-border-radius:43px;
    -o-border-radius:43px;
    border-radius:43px;
    }
    @-moz-keyframes ball_moveG{
    0%{
    -moz-transform:rotate(0deg)}
    100%{
    -moz-transform:rotate(360deg)}
    }
    @-webkit-keyframes ball_moveG{
    0%{
    -webkit-transform:rotate(0deg)}
    100%{
    -webkit-transform:rotate(360deg)}
    }
    @-ms-keyframes ball_moveG{
    0%{
    -ms-transform:rotate(0deg)}
    100%{
    -ms-transform:rotate(360deg)}
    }
    @-o-keyframes ball_moveG{
    0%{
    -o-transform:rotate(0deg)}
    100%{
    -o-transform:rotate(360deg)}
    }
    @keyframes ball_moveG{
    0%{
    transform:rotate(0deg)}
    100%{
    transform:rotate(360deg)}
    }

    Lalu letakkan kode berikut tepat dibawah 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="bowlG">
    <div id="bowl_ringG">
    <div class="ball_holderG">
    <div class="ballG">
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- End Loader -->



    Klik Pratinjau, kalau loading muncul silahkan simpan template

    # Style 4
    membuat animasi loading blog css

    Demo

    Masukkan Kode berikut tepat diatas 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;}
    #circular3dG{
    position:relative;
    width:100px;
    height:100px;margin:10% auto;
    }
    .circular3dG{
    position:absolute;
    background-color:#00C4FF;
    width:28px;
    height:28px;
    -moz-border-radius:30px;
    -moz-animation-name:bounce_circular3dG;
    -moz-animation-duration:0.48s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:30px;
    -webkit-animation-name:bounce_circular3dG;
    -webkit-animation-duration:0.48s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -ms-border-radius:30px;
    -ms-animation-name:bounce_circular3dG;
    -ms-animation-duration:0.48s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -o-border-radius:30px;
    -o-animation-name:bounce_circular3dG;
    -o-animation-duration:0.48s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    border-radius:30px;
    animation-name:bounce_circular3dG;
    animation-duration:0.48s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    }
    #circular3d_1G{
    left:41px;
    top:6px;
    -moz-animation-delay:0.18s;
    -webkit-animation-delay:0.18s;
    -ms-animation-delay:0.18s;
    -o-animation-delay:0.18s;
    animation-delay:0.18s;
    }
    #circular3d_2G{
    left:61px;
    top:23px;
    -moz-animation-delay:0.24s;
    -webkit-animation-delay:0.24s;
    -ms-animation-delay:0.24s;
    -o-animation-delay:0.24s;
    animation-delay:0.24s;
    }
    #circular3d_3G{
    left:73px;
    top:45px;
    -moz-animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
    -ms-animation-delay:0.3s;
    -o-animation-delay:0.3s;
    animation-delay:0.3s;
    }
    #circular3d_4G{
    left:69px;
    top:67px;
    -moz-animation-delay:0.36s;
    -webkit-animation-delay:0.36s;
    -ms-animation-delay:0.36s;
    -o-animation-delay:0.36s;
    animation-delay:0.36s;
    }
    #circular3d_5G{
    left:42px;
    top:73px;
    -moz-animation-delay:0.42000000000000004s;
    -webkit-animation-delay:0.42000000000000004s;
    -ms-animation-delay:0.42000000000000004s;
    -o-animation-delay:0.42000000000000004s;
    animation-delay:0.42000000000000004s;
    }
    #circular3d_6G{
    left:8px;
    top:48px;
    -moz-animation-delay:0.48s;
    -webkit-animation-delay:0.48s;
    -ms-animation-delay:0.48s;
    -o-animation-delay:0.48s;
    animation-delay:0.48s;
    }
    #circular3d_7G{
    left:0px;
    top:14px;
    -moz-animation-delay:0.5399999999999999s;
    -webkit-animation-delay:0.5399999999999999s;
    -ms-animation-delay:0.5399999999999999s;
    -o-animation-delay:0.5399999999999999s;
    animation-delay:0.5399999999999999s;
    }
    #circular3d_8G{
    left:17px;
    top:0px;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-delay:0.6s;
    }
    @-moz-keyframes bounce_circular3dG{
    0%{
    -moz-transform:scale(1)}
    100%{
    -moz-transform:scale(.3)}
    }
    @-webkit-keyframes bounce_circular3dG{
    0%{
    -webkit-transform:scale(1)}
    100%{
    -webkit-transform:scale(.3)}
    }
    @-ms-keyframes bounce_circular3dG{
    0%{
    -ms-transform:scale(1)}
    100%{
    -ms-transform:scale(.3)}
    }
    @-o-keyframes bounce_circular3dG{
    0%{
    -o-transform:scale(1)}
    100%{
    -o-transform:scale(.3)}
    }
    @keyframes bounce_circular3dG{
    0%{
    transform:scale(1)}
    100%{
    transform:scale(.3)}
    }


    Lalu letakkan kode berikut tepat dibawah 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="circular3dG">
    <div id="circular3d_1G" class="circular3dG">
    </div>
    <div id="circular3d_2G" class="circular3dG">
    </div>
    <div id="circular3d_3G" class="circular3dG">
    </div>
    <div id="circular3d_4G" class="circular3dG">
    </div>
    <div id="circular3d_5G" class="circular3dG">
    </div>
    <div id="circular3d_6G" class="circular3dG">
    </div>
    <div id="circular3d_7G" class="circular3dG">
    </div>
    <div id="circular3d_8G" class="circular3dG">
    </div>
    </div>
    </div>
    <!-- End Loader -->


    Klik Pratinjau, kalau loading muncul silahkan simpan template

    # Style 5
    membuat-animasi-loading-blog-css3

    Demo

    Masukkan Kode berikut tepat diatas 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;}

    .bubblingG {
    text-align: center;
    width:100px;
    height:63px;margin:10% auto;
    }
    .bubblingG span {
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    margin: 31px auto;
    background: #7BFF00;
    -moz-border-radius: 63px;
    -moz-animation: bubblingG 0.6s infinite alternate;
    -webkit-border-radius: 63px;
    -webkit-animation: bubblingG 0.6s infinite alternate;
    -ms-border-radius: 63px;
    -ms-animation: bubblingG 0.6s infinite alternate;
    -o-border-radius: 63px;
    -o-animation: bubblingG 0.6s infinite alternate;
    border-radius: 63px;
    animation: bubblingG 0.6s infinite alternate;
    }
    #bubblingG_1 {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
    }
    #bubblingG_2 {
    -moz-animation-delay: 0.18s;
    -webkit-animation-delay: 0.18s;
    -ms-animation-delay: 0.18s;
    -o-animation-delay: 0.18s;
    animation-delay: 0.18s;
    }
    #bubblingG_3 {
    -moz-animation-delay: 0.36s;
    -webkit-animation-delay: 0.36s;
    -ms-animation-delay: 0.36s;
    -o-animation-delay: 0.36s;
    animation-delay: 0.36s;
    }
    @-moz-keyframes bubblingG {
    0% {
    width: 13px;
    height: 13px;
    background-color:#7BFF00;
    -moz-transform: translateY(0);
    }
    100% {
    width: 30px;
    height: 30px;
    background-color:#FF0000;
    -moz-transform: translateY(-26px);
    }
    }
    @-webkit-keyframes bubblingG {
    0% {
    width: 13px;
    height: 13px;
    background-color:#7BFF00;
    -webkit-transform: translateY(0);
    }
    100% {
    width: 30px;
    height: 30px;
    background-color:#FF0000;
    -webkit-transform: translateY(-26px);
    }
    }
    @-ms-keyframes bubblingG {
    0% {
    width: 13px;
    height: 13px;
    background-color:#7BFF00;
    -ms-transform: translateY(0);
    }
    100% {
    width: 30px;
    height: 30px;
    background-color:#FF0000;
    -ms-transform: translateY(-26px);
    }
    }
    @-o-keyframes bubblingG {
    0% {
    width: 13px;
    height: 13px;
    background-color:#7BFF00;
    -o-transform: translateY(0);
    }
    100% {
    width: 30px;
    height: 30px;
    background-color:#FF0000;
    -o-transform: translateY(-26px);
    }
    }
    @keyframes bubblingG {
    0% {
    width: 13px;
    height: 13px;
    background-color:#7BFF00;
    transform: translateY(0);
    }
    100% {
    width: 30px;
    height: 30px;
    background-color:#FF0000;
    transform: translateY(-26px);
    }
    }


    Lalu letakkan kode berikut tepat dibawah 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 class="bubblingG">
    <span id="bubblingG_1">
    </span>
    <span id="bubblingG_2">
    </span>
    <span id="bubblingG_3">
    </span>
    </div>
    </div>
    <!-- End Loader -->


    Klik Pratinjau, kalau loading muncul silahkan simpan template

    # Style 6


    Demo

    Masukkan Kode berikut tepat diatas 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;}
    #spinningSquaresG{
    position:relative;
    width:240px;
    height:29px;margin:10% auto;}
    .spinningSquaresG{
    position:absolute;
    top:0;
    background-color:#FFDD00;
    width:29px;
    height:29px;
    -moz-animation-name:bounce_spinningSquaresG;
    -moz-animation-duration:0.6s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -moz-transform:scale(.3);
    -webkit-animation-name:bounce_spinningSquaresG;
    -webkit-animation-duration:0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-transform:scale(.3);
    -ms-animation-name:bounce_spinningSquaresG;
    -ms-animation-duration:0.6s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -ms-transform:scale(.3);
    -o-animation-name:bounce_spinningSquaresG;
    -o-animation-duration:0.6s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -o-transform:scale(.3);
    animation-name:bounce_spinningSquaresG;
    animation-duration:0.6s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.3);
    }
    #spinningSquaresG_1{
    left:0;
    -moz-animation-delay:0.24s;
    -webkit-animation-delay:0.24s;
    -ms-animation-delay:0.24s;
    -o-animation-delay:0.24s;
    animation-delay:0.24s;
    }
    #spinningSquaresG_2{
    left:30px;
    -moz-animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
    -ms-animation-delay:0.3s;
    -o-animation-delay:0.3s;
    animation-delay:0.3s;
    }
    #spinningSquaresG_3{
    left:60px;
    -moz-animation-delay:0.36s;
    -webkit-animation-delay:0.36s;
    -ms-animation-delay:0.36s;
    -o-animation-delay:0.36s;
    animation-delay:0.36s;
    }
    #spinningSquaresG_4{
    left:90px;
    -moz-animation-delay:0.42s;
    -webkit-animation-delay:0.42s;
    -ms-animation-delay:0.42s;
    -o-animation-delay:0.42s;
    animation-delay:0.42s;
    }
    #spinningSquaresG_5{
    left:120px;
    -moz-animation-delay:0.48s;
    -webkit-animation-delay:0.48s;
    -ms-animation-delay:0.48s;
    -o-animation-delay:0.48s;
    animation-delay:0.48s;
    }
    #spinningSquaresG_6{
    left:150px;
    -moz-animation-delay:0.54s;
    -webkit-animation-delay:0.54s;
    -ms-animation-delay:0.54s;
    -o-animation-delay:0.54s;
    animation-delay:0.54s;
    }
    #spinningSquaresG_7{
    left:180px;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-delay:0.6s;
    }
    #spinningSquaresG_8{
    left:210px;
    -moz-animation-delay:0.66s;
    -webkit-animation-delay:0.66s;
    -ms-animation-delay:0.66s;
    -o-animation-delay:0.66s;
    animation-delay:0.66s;
    }
    @-moz-keyframes bounce_spinningSquaresG{
    0%{
    -moz-transform:scale(1);
    background-color:#FFDD00;
    }
    100%{
    -moz-transform:scale(.3) rotate(90deg);
    background-color:#FF0000;
    }
    }
    @-webkit-keyframes bounce_spinningSquaresG{
    0%{
    -webkit-transform:scale(1);
    background-color:#FFDD00;
    }
    100%{
    -webkit-transform:scale(.3) rotate(90deg);
    background-color:#FF0000;
    }
    }
    @-ms-keyframes bounce_spinningSquaresG{
    0%{
    -ms-transform:scale(1);
    background-color:#FFDD00;
    }
    100%{
    -ms-transform:scale(.3) rotate(90deg);
    background-color:#FF0000;
    }
    }
    @-o-keyframes bounce_spinningSquaresG{
    0%{
    -o-transform:scale(1);
    background-color:#FFDD00;
    }
    100%{
    -o-transform:scale(.3) rotate(90deg);
    background-color:#FF0000;
    }
    }
    @keyframes bounce_spinningSquaresG{
    0%{
    transform:scale(1);
    background-color:#FFDD00;
    }
    100%{
    transform:scale(.3) rotate(90deg);
    background-color:#FF0000;
    }
    }


    Lalu letakkan kode berikut tepat dibawah 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="spinningSquaresG">
    <div id="spinningSquaresG_1" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_2" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_3" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_4" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_5" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_6" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_7" class="spinningSquaresG">
    </div>
    <div id="spinningSquaresG_8" class="spinningSquaresG">
    </div>
    </div>
    </div>
    <!-- End Loader -->


    Klik Pratinjau, kalau loading muncul silahkan simpan template

    Oke akhirnya selesai juga Tutorial Cara Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader ini, jika ada kesalahan dalam mengetik saya mohon maaf karena saya sudah ngantuk sekali ini :(

    oh iya kamu juga bisa menggunakan style Animated Loader yang lain lho, cara bikin animasi nya kamu pergi aja ke situs http://cssload.net/ disana kamu bisa berkreasi membuat animasi loading yang kamu sukai

    oh iya satu lagi, kalau artikel ini bermanfaat, join blog ini ya (tombolnya ada di bawah) :)

    Kalau ada yang belum jelas tulis aja di komentar


    Share To :
    FACEBOOK DIGG TWITTER GOOGLE+ LINTASKAN STUMBLEUPON

    55 comments

    avatar
    Balas
    Farhan Breaker delete 9 Februari 2013 09.40

    keren gan thanks ya,,, klau psang emticon sprti dikotak kmentar ini gimna ya

    avatar
    Balas
    Admin The Indonesia! delete 9 Februari 2013 09.48

    gan judul lagu blognya apa gan bagi donk lagunya

    avatar
    Balas
    Farhan Breaker delete 9 Februari 2013 09.56

    ini lagunya http://andi-techno.blogspot.com/2012/06/download-mp3-edward-maya-stereo-love.html

    avatar
    Balas
    Andi X-Gen delete 9 Februari 2013 15.38

    tuh bener kata Farhan :-bd

    avatar
    Balas
    Andi X-Gen delete 9 Februari 2013 15.39

    ntar ya satu2

    avatar
    Balas
    EKA IKHSANUDIN delete 9 Februari 2013 19.36

    mantaaaap, kapan2 mau nyoba ah.. hehehe .... :) keren Kang

    avatar
    Balas
    Andi X-Gen delete 9 Februari 2013 20.22

    hehe silahkan mas Eka :-d

    avatar
    Balas
    andieshinigami delete 9 Februari 2013 20.27

    waaah menari sekali ini
    tapi bikin sedikit lemot gag sob???

    avatar
    Balas
    Arya Aditya delete 9 Februari 2013 20.35

    Keren Bro :D
    Silakan Dilihat Blog Saya.

    Link : http://cracker-9.blogspot.com

    avatar
    Balas
    Andi X-Gen delete 9 Februari 2013 22.30

    gak juga sih sob, fungsi utama dari efek loading ini sebenarnya bukan untuk menghias blog tapi untuk membuat pengunjung tidak bosan menunggu halaman blog dimuat 100%, jadi ketika loading selesai pengnunjung tinggal membaca artikel kita tanpa harus menunggu gambar atau sebagian konten untuk meload :)

    avatar
    Balas
    Andi X-Gen delete 9 Februari 2013 22.31

    keren :-d

    avatar
    Balas
    Andi X-Gen delete 9 Februari 2013 22.40

    tapi ngomong2 itu menari apa menarik sob :D

    avatar
    Balas
    Farhan Breaker delete 10 Februari 2013 09.01

    ko' lama bnget gk ke bka2 gan

    avatar
    Balas
    Andi X-Gen delete 10 Februari 2013 09.37

    lamanya bisa diatur kok


    setTimeout(function() {
    $('#xgenloader-screen').fadeOut();
    }, 5000);


    angka 5000 menunjukkan waktu loader 5 detik, kurangi angkanya untuk lebih cepat

    avatar
    Balas
    Farhan Breaker delete 10 Februari 2013 10.45

    msih gk bsa ke buka, apa templatenya ya???

    avatar
    Balas
    Andi X-Gen delete 10 Februari 2013 16.09

    mana link blognya biar saya liat

    avatar
    Balas
    Iril Sagita delete 12 Februari 2013 08.48

    Blog aku juga ya kak :

    www.sagitasoft.com

    avatar
    Balas
    www.anakgoogles.Blogspot.com delete 23 Februari 2013 09.07

    \m/
    Mantap,,!!!

    avatar
    Balas
    Andi X-Gen delete 23 Februari 2013 16.47

    thanks :yaya:

    avatar
    Balas
    PutuGiBagi delete 3 Maret 2013 14.10

    Waduh, kode scriptnya banyak banget gan?..
    apa tidak berpengaruh dengan loading blog nantinya,
    mampir balik ya ;)

    avatar
    Balas
    Andi X-Gen delete 3 Maret 2013 16.01

    kan gak semuanya dipake sob :)

    avatar
    Balas
    Adhi Blogz delete 21 Maret 2013 21.23

    Bagaimana gan agar efeknya hanya tampil dihomepage saja...

    http://adhi-lasoma.blogspot.com :bye:

    avatar
    Balas
    Galih N Gumilar delete 23 Maret 2013 11.30
    Komentar ini telah dihapus oleh administrator blog.
    avatar
    Balas
    Jony Erten delete 23 Maret 2013 12.30

    :)

    avatar
    Balas
    Andi X-Gen delete 23 Maret 2013 13.06

    sialhakan menambahkan tag kondisional di atas kode loadernya :)

    avatar
    Balas
    3vinty_01_Skoliosis Berkarya delete 23 Maret 2013 18.39

    terimaksih untuk infonya, tp kug blogq malah gak bisa dibuka.... muncul loadingnya terus.. T_T

    avatar
    Balas
    Andi X-Gen delete 24 Maret 2013 11.04

    blog kamu aja tuh, di demo nya kan nggak,
    mana blognya?

    avatar
    Balas
    Pus Yakiz delete 30 Maret 2013 23.53

    Terimakasih banyak ya Sob Atas Loadingnya Yang Mangstab-Mangstab !!!

    Udah Saya Praktekin Di Blog Saya :)
    Dan Hasilnya Mangstab !!!

    Ohh Iya ... Bloag Sobat Udah Saya Follow, Jangan Lupa Follback Blog Saya Ya Sob !

    Ini Alamat Blog Saya : http://pusyakiz.blogspot.com/

    avatar
    Balas
    Andi X-Gen delete 31 Maret 2013 02.00

    yups, udah saya followback

    avatar
    Balas
    Novan Gufran delete 1 April 2013 05.15
    Komentar ini telah dihapus oleh pengarang.
    avatar
    Balas
    Novan Gufran delete 1 April 2013 05.17

    thanks infonya sob..
    follback-nya yahh sob :)
    www.novnadiehard19.blogspot.com

    salam sukses !!

    avatar
    Balas
    Tommy May delete 1 April 2013 16.44

    bikin lama gk gan

    avatar
    Balas
    Agung Surya Prayoga delete 1 April 2013 19.31

    wah keren gan
    udah saya pasang di blog saya dan berhasil \m/

    http://aeroaxel.blogspot.com/

    avatar
    Balas
    Andi X-Gen delete 1 April 2013 23.35

    tergantung blog kamu sih, coba liat blog dari sobat Agung Surya Prayoga dibawah :)

    avatar
    Balas
    Andi X-Gen delete 1 April 2013 23.35

    yups :yaya:

    avatar
    Balas
    Muhasan Beki delete 12 April 2013 00.16

    Trims gan infonya ane coba di blog ane, http://klik.ciledugmedia.com dan hasilnya mantaap. OK

    avatar
    Balas
    Fherdy Vernando delete 16 April 2013 05.40

    Mass saya baru pasang Codenya ke blog.
    Work 100%.
    tapi kok jadinya gabisa saya mengklik/edit PAGE ELEMENT (GADGET&WIDGET) ..???
    Bisanya cman Gadget Favicon. yang lain gabisa.
    Tapi kalau langsung dari halaman Blog kita sunting masih bisa.
    Mungkin ada yg salah mas.?
    Mohon pencerahannya.
    Makasih :-)

    avatar
    Balas
    Andi X-Gen delete 16 April 2013 15.55

    wah kok bisa gitu ya, ngeletakkin kode html nya di "edit html" atau di tata letak emang?
    karena kode ini gak mengganggu tata letak

    avatar
    Balas
    Fherdy Vernando delete 17 April 2013 08.26

    Letaknya di edit HTML mas.
    ngeletak code CSS nya di skin Udh bener mas. Pas di Code Body ni yg salah kyknya ni mas, Soalnya saya pasang satu2 dlu trus save, setelah saya pasang nah rupanya yg di code Body ni yg bermasalah mas.
    ni kan ada 6 Style loading tuh. Saya udh test semua cuman yg gada masalah di Style no. 4. Selebih nya gabisa diklik PAGE ELEMENT nya :/.
    Bisa dibntu gk mas. :D soalnya saya suka sama Style yg no. 6.

    avatar
    Balas
    Andi X-Gen delete 17 April 2013 17.29

    coba letakkan kode html nya diatas </body>

    avatar
    Balas
    Fherdy Vernando delete 18 April 2013 17.23

    Udh mas.
    masi sama kyk gitu.
    gpp lah.
    Kalo Archive Blog yang slide ada mas gk..?

    avatar
    Balas
    Andi X-Gen delete 18 April 2013 18.27

    maksudnya archive slide gimana ya?

    avatar
    Balas
    vivian lyn delete 22 April 2013 16.01

    mantap gan dari www.aifafashop.com

    avatar
    Balas
    AlexaUntuk Anda delete 24 April 2013 21.37

    Mas... saya mau tanya kalo memberi loading nya waktu mau mengganti Artikel terbaru (Pagination ) Tetapi di beri Animasi loading gimana ya mas...

    avatar
    Balas
    Andi X-Gen delete 25 April 2013 08.14

    maaf maksudnya mengganti artikel terbaru gimana ya?

    avatar
    Balas
    A-Gen ComCell delete 22 Mei 2013 22.41

    Meluncur TKP

    avatar
    Balas
    Yoga Pratama delete 29 Mei 2013 13.33

    Sob pengen animasi loadingnya sama kaya santa-mars, gimana ??

    avatar
    Balas
    Ashock smansa mania delete 29 Mei 2013 14.07

    Hay sob aku mau nanya bagaimana cara membuat blockquote seperti http://1.bp.blogspot.com/-yAr1uZInCRQ/UaWonL8qrSI/AAAAAAAAAKE/XNeg92w58H8/s1600/Tanpa+judul.png

    avatar
    Balas
    Andi X-Gen delete 29 Mei 2013 19.01

    yang gimana ya? saya ga tau tuh loading santa mars :)

    avatar
    Balas
    ridwan nur delete 22 Juli 2013 14.42

    mas loading nya ko ga selesai" ?

    avatar
    Balas
    Rizqi Fadhillah delete 27 November 2013 14.57

    mas ane mau nanya , itu ngebuat URL demonya gmana ? kan itu cuma 1 blog , tpi kok bsa langsung 6 animasi dalam 1 blog ? tolong ksh tau donk caranya mas :D
    jgn lupa mampir ke blog sederhana saya
    http://rizqy-fadhillah.blogspot.com

    avatar
    Balas
    hendri tobing delete 29 Januari 2014 17.51

    cara membuat Border melengkung kayak mana gan

    avatar
    Balas
    Aldi Putra delete 23 Februari 2014 13.49

    stelah ane cari kok kode "body" gak ada ya ??

    avatar
    Balas
    Dafiin Defandaky delete 20 Maret 2014 22.05

    kieren gan, kunjungan perdana salam kenal...

    avatar
    Balas
    mudir amunisi delete 26 Desember 2014 01.40

    sukses besar gan,. makasih

    Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
    Dan berkomentarlah dengan kata-kata yang sopan.

    "Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)

    Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>

    Posting Lebih Baru Posting Lama

    Pengikut

    Arsip Blog

    • ►  2015 (24)
      • ►  Mei (13)
      • ►  April (10)
      • ►  Februari (1)
    • ▼  2013 (352)
      • ►  Agustus (6)
      • ►  Juli (14)
      • ►  Juni (24)
      • ►  Mei (63)
      • ►  April (59)
      • ►  Maret (63)
      • ▼  Februari (56)
        • Unik, Cuma Tidur Digaji 1,6 Juta Sehari
        • Ada-ada Saja, Karena Mabuk Pemuda ini "Perkosa" Am...
        • Mengakses Situs yang Diblok Provider Internet
        • Tahukah Kamu Berapa Kali Tom Menang dari Jerry dal...
        • 9 Cara Menyalakan Api Tanpa Korek Api
        • Foto Polwan Korea yang Cantik + Bening
        • 10 Hadiah Termahal di Dunia
        • Bocah Ini Dibutakan Oleh Sinar Matahari
        • Tanda di Jalan Jadi Lucu Karena Abraham
        • Totoro Bed, Tempat Tidur yang Unik
        • 5 Rekor Terjauh Snipper dalam Membunuh
        • Tutorial Photoshop, Membuat Gambar Vector + Video
        • Kumpulan Soal Latihan UAN SMA 2013
        • 3 Situs Terbaik untuk Cek Kecepatan Loading dan Op...
        • KOPASSUS Indonesia Adalah Pasukkan Elite Terhebat ...
        • Tanda Kalau Kamu Kecanduan Komputer, Fun+Unik
        • 5 Hal yang Identik dengan James Bond
        • 5 Wanita IT Paling Cantik dan Seksi
        • Lukisan yang Sangat Realistis (Seperti Hidup)
        • Cara Menyalakan Api Menggunakan Es + Video
        • 5 Peralatan Portable Paling Aneh Didunia
        • Pusat Grosir Baju Paling Murah, Harga Mulai dari 3...
        • 5 Pasukkan Elit Terkuat di Dunia, Indonesia Diurut...
        • Tips SEO, Mengupas Tuntas Kelebihan, Kekurangan KO...
        • Hujan Meteor Seperti Kiamat di Rusia, 500 Orang Te...
        • Unik, Roti Berbentuk Organ Tubuh Manusia
        • Trik Membuat Tombol Social Media Tanpa Gambar, Han...
        • Valentine Haram Dirayakan Remaja di Aceh
        • Budaya Valentine di Kalangan Remaja (Pelajaran)
        • Unik, Celana Dalam Anti Bau Kentut
        • 5 Kebiasaan Unik Pesepak Bola Legenda Sebelum Bert...
        • Lukisan Wajah dari Floppy Disc yang Menakjubkan
        • 5 Cermin Terunik di Dunia
        • 5 Koleksi Teraneh yang Dilakukan Orang
        • Unik, Video Tarian Gangnam Style Versi Flipbook
        • Cara Menghilangkan Read More Otomatis pada Laman B...
        • 10 Negara Dengan Teknik Mencuri Paling Gila di Dun...
        • Alasan Superhero Menolak Datang ke Indonesia, Fun
        • Membuat Animasi Loading Blog CSS3 dengan 6 Variasi...
        • Ponsel Ini Diklaim Lebih Kecil dari Kartu Kredit
        • Truth or Dare, Permainan Unik dan Seru dari Amerik...
        • Liquid E1, Jagoan Baru Acer di Jagat Android
        • Kuliner Mengerikan yang Ada di Penjara
        • ilmuan berhasil menciptakan nyawa buatan?
        • Hardisk Kapasitas Terbesar 1 Yottabytes atau 1 Tri...
        • Helicak, Kendaraan yang Telah Punah di Jakarta Ind...
        • Samsung Siapkan Tablet Lebih Murah dari Nexus 7
        • Update Pagerank Google 4 Februari 2013
        • 10 kota Terpadat di Indonesia
        • Ini Dia Penampakan Paling Jelas Galaxy Note 8.0
        • Lonomia Ulat Paling Berbahaya Di Dunia (Geli Liatn...
        • Logitech akan Stop Beberapa Aksesoris Game
        • Spesies-Spesies Hewan Tertua yang Ada di Bumi
        • Mobil Ini Cuma Butuh 13 Detik untuk Capai 300 Km
        • "Kobe Mosque" Masjid Yang Tak Roboh Meski Di Terpa...
        • 2 Ilmuan Amerika Temukan Hiu Tokek
      • ►  Januari (67)
    • ►  2012 (1317)
      • ►  Desember (62)
      • ►  November (83)
      • ►  Oktober (69)
      • ►  September (91)
      • ►  Agustus (123)
      • ►  Juli (153)
      • ►  Juni (150)
      • ►  Mei (158)
      • ►  April (83)
      • ►  Maret (46)
      • ►  Februari (75)
      • ►  Januari (224)
    • ►  2011 (203)
      • ►  Desember (161)
      • ►  November (20)
      • ►  Oktober (8)
      • ►  September (1)
      • ►  Agustus (4)
      • ►  Juli (4)
      • ►  Juni (1)
      • ►  April (1)
      • ►  Maret (3)

    Label

    • anti virus
    • artikel
    • berita
    • bisnis
    • blackberry
    • blogger
    • cerita
    • dunia
    • dunia hewan
    • facebook
    • Fakta
    • free serial number
    • Full Version
    • fun
    • gadget
    • game
    • gombal
    • google
    • Hacker News
    • Hacking
    • harga handphone
    • health
    • ilmu
    • indonesia
    • internet marketing
    • kisah
    • komputer internet
    • Kuliner
    • laptop
    • legenda
    • love
    • manusia
    • misteri
    • mobile
    • movie
    • news
    • other
    • otomotif
    • PC performance
    • pedang
    • Pengetahuan
    • phone
    • punk rock
    • Root Android
    • sains
    • scaning
    • sejarah
    • Serial Number
    • social media
    • software
    • source code
    • sport
    • teknologi
    • template
    • tips dan trik
    • tool
    • trik desain grafis
    • trik facebook
    • trik internet
    • tutorial blog
    • tutorial hack
    • tweaking
    • unik
    • video
    • web internet

    Tutorial Blogging

    • Apa itu PA dan DA ?
    • Cara Cek PA dan DA Massal
    • Daftar Social Bookmark High PR
    • Cara Menghilangkan Readmore
    • Tips Blogging Lainnya ...
    | Security | Multimedia | System Tuning | Developer | Games | Tools | Converted | Browser | Messanging | File Sharing | Desktop | Office | Compress |
    Copyright © 2013. Technology Tower - All Rights Reserved
    Designed By ZuLThinK
    Proudly Powered By Blogger