contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Animasi Loading Saat page dimuat

Posted in Javascript Jquery Life at 06 Agustus 2017 With 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

▼ Download Source Code Dibawah Ini ▼


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

animasi loading saat halaman dimuat

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>

Artikel Rekomendasi



Artikel Terkait

Diskusi