Membuat Animasi Loading Saat page dimuat

Publish Date : 06-08-2017 , dibaca 23753 kali, Hari ini dibaca : 1 kali ,0 comments

Artikel kali ini kita akan membuat Animasi Loading saat page dimuat dengan jquery dan css, Menunggu page dimuat adalah suatu hal yang cukup membosankan, apa lagi jika akses jaringan internet yang digunakan low / lambat, content / page website akan meload dengan waktu yang cukup lama,,, tak jarang pengunjung juga akan merasa tidak nyaman dan akhirnya meninggalkan website tersebut

Pentingnya mempertimbangkan kecepatan website merupakan faktor penting dalam perjalanan sebuah website yang harus tetap dijaga kestablianya

OK.. tips kali ini kita akan membuat animasi Loading saat page / halaman dimuat dengan Jquery

HTML

Tambahkan kode html dibawah ini setelah tag <body> . Ini merupakan tag div yang digunakan untuk menampilkan animasi

<div class="loader"></div>

CSS

Tambahkan kode css dibawah ini :

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('images/pageLoader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}

JavaScript

Tambahkan code berikut ini untuk memanggil jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>

Menampilkan type File dan Ukuran pada input file
Previous Post

Menampilkan Gambar Sebelum Upload ke Server
Next Post