Skip to content Skip to sidebar Skip to footer

Loading Animasi Ringan Untuk Blogger




BAHASTUTORIAL.COM - Tutorial kali ini kita bakal bahas tentang "Loading Animasi Ringan Untuk Blogger".
Loading yang kita buat saat ini adalah loading/loader yang sangat ringan. Loading akan muncul ketika pertama kali masuk ke website / blogger . Sangat cocok untuk memperbagus tampilan blogger kalian .. Khususnya kalian yang suka memperbagus template blogger kalian.

Langsung saja ke tutorial ya ..

1. Masuk ke edit html
2. Kode pada table css simpan di atas kode </b:skin> atau </style>
3. Kode pada table html simpan di bawah kode <body>
4. Kode pada table javascript simpan di atas kode </body> atau </head>
4. Lalu Simpan


 
 
/* Start Loader Animasi By : bahastutorial.com */

#loaderbt {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 1);
    z-index: 1000
}

.spinnerbt {
    position: fixed;
    width: 100%;
    top: 70%;
    height: 30px;
    text-align: center;
    font-size: 10px
}

.spinnerbt,
.spinnerbt-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 9px solid white;
    border-color: transparent white;
    margin: auto
}

.spinnerbt {
    width: 85px;
    height: 85px;
    -webkit-animation: spin 2.2s linear 0s infinite normal;
    -moz-animation: spin 2.2s linear 0s infinite normal;
    animation: spin 2.2s linear 0s infinite normal
}

.spinnerbt-inner {
    width: 40px;
    height: 40px;
    -webkit-animation: spinback 1.2s linear 0s infinite normal;
    -moz-animation: spinback 1.2s linear 0s infinite normal;
    animation: spinback 1.2s linear 0s infinite normal
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0)
    }
    to {
        -moz-transform: rotate(360deg)
    }
}

@keyframes spin {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spinback {
    from {
        -webkit-transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(-360deg)
    }
}

@-moz-keyframes spinback {
    from {
        -moz-transform: rotate(0)
    }
    to {
        -moz-transform: rotate(-360deg)
    }
}

@keyframes spinback {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(-360deg)
    }
}
/* End Loader Animasi By : bahastutorial.com */

 

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".spinnerbt").fadeOut("slow");
                setTimeout(function () {
                    $("#loaderbt").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>



<div id="loaderbt">
        <div class="spinnerbt">
            <div class="spinnerbt-inner"></div>
        </div>
    </div>


Notes

Semua tutorial yang ada di website bahastutorial.com sudah di coba dan hasilnya berjalan dengan baik.
Bagaimana tutorial diatas apakah sudah jelas atau masih ada yang kurang jelas.
Jika ada yang masih kurang paham kalian bisa tanyakan langsung di kolom komentar.
Admin akan merespon dan memberikan solusi agar kalian bisa menjalankanya dengan benar.

Jangan lupa share artikel ini ke media sosial kalian yah. Semoga Bermanfaat ..

BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

Post a Comment for "Loading Animasi Ringan Untuk Blogger"