Online Web Tutorial

Membuat Animasi Loading dengan JQuery

Membuat Animasi Loading dengan JQuery

FSodic.ID - Halo para jomblo, gimana kabar kalian? Wifi tetangga aman? atau lagi terisolir belum dibayar oke sambil nunggu tetangga ke Indomaret buat bayar wifinya, mending ikuti tutorial di fsodic.id. Tenang, tutorial di fsodic.id gak akan ngebahas tentang PHP, Linux, Ubuntu atau Android melainkan hanya tutorial-tutorial tentang blog khususnya blog di WapBlog.ID dan mungkin bisa diaplikasikan ke situs atau blogmu diluar WapBlog.ID.

Pada kesempatan ini, saya akan ngebahas salah satu permintaan user yang meminta Tutorial Membuat animasi loading pada blog. Berhubung sedang buntu buat ngepost setelah semalam buat ngejar versi Baru WapBlog.ID bagian Akun Set, mau main PUBG juga too soon mulu  dan saya juga lagi cari-cari bahan postingan, ya okelah.

Oke, sebelum kita mulai alangkah baiknya kalian siapkan dulu alat-alat pendukung berikut:
- Secangkir kopi hitam
- Sebungkus rokok L* Bold
- Putar lagu yang membara
- Dan setoples cemilan

Apabila sudah siap, yuk langsung kita bahas dari awal.

Animasi loading page sendiri berguna untuk memberikan tampilan blogmu nuansa yang hidup sekaligus memberikan waktu menunggu halaman siap ditampilkan ke pengunjung. Ini juga berhubungan dengan tutorial-tutorial sebelumnya dimana saya selalu menempatkan eksekusi JQuery atau native Javascript setelah response readyState complete (dalam native) atau ready() (dalam JQuery).

Ada banyak cara untuk membuat animasi loading ini, baik dengan teks, gambar, icon toolkit html (seperti Fontawesome, Material Icons, Line Icons dll).

1. Teks
Cari closing tag body pada template (</body>) dan sisipkan html berikut:

<div class="load-animation">Memuat</div>

Lalu tambahkan CSS berikut:

.load-animation {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: #fff;
}

Catatan tambahan, properti z-index disini angka yang menampilkan urutan dari sebuah elemen. Dimana nilai yang semakin besar akan ditampilkan paling atas atau paling depan.

Dan jangan lupa JQuery-nya

$(document).ready(function(){
$('.load-animation').remove();
});

Catatan tambahan, $('.load-animation').remove(); class load-animation akan dihapus begitu halaman sepenuhnya selesai dimuat.

2. Gambar
Masih dengan cara yang sama, kamu juga harus menyiapkan 1 gambar. Sebagai contoh saya akan mengguakan gambar ini:

Untuk HTML:

<div class="load-animation"></div>

Untuk CSS:

.load-animation {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background-image: url(https://fs.idnblogger.com/files/google.png);
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: 150px auto;
}

Untuk background-size, bisa dengan satu atau dua value. Dimana ukuran terserah pada kalian. Nah background-image kalian tempatkan url logo atau gambar.

Dan JQuery-nya jangan lupa:

$(document).ready(function(){
$('.load-animation').remove();
});

3. Ikon Toolkit
Disini saya menggunakan Font Awesome v4.7.0

Berikut HTMLnya

<div class="load-animation"><i class="fa fa-spinner fa-pulse"></i> Memuat</div>

Lalu tambahkan CSS berikut:

.load-animation {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: #fff;
}
.load-animation i {
margin-right: 15px;
}

Untuk Font Awesome-nya saya sarankan menggunakan:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" />

Nah, JQuery masih tetap sama dengan sebelumnya:

$(document).ready(function(){
$('.load-animation').remove();
});

4. Kombinasi Logo dengan CSS
Pada bagian saya terapkan juga disalah satu tampilan Baru WapBlog.ID yang baru saja rilis tadi malam.

HTML:

<div class="load-animation"><div class="load-logo"></div><div class="load-bar"></div></div>

CSS:

.load-animation {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
background: #fff;
}
.load-animation .load-logo {
background-image: url(https://fs.idnblogger.com/files/google.png);
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: 150px auto;
height: 150px;
}
.load-bar {
position: relative;
background: #eee;
height: 3px;
width: 150px;
}
.load-bar:after {
content: "";
left: 50%;
right: 50%;
top: 0;
bottom: 0;
background: #de1339;
animation: loadBar 1s infinite ease;
}
@keyframes loadBar{
0,100%{
left: 50%;
right: 50%;
}
50% {
left: 0;
right: 0;
}
}

Nah untuk jquerynya kalian silahkan kode sebelumnya. Jika kalian merasa load terlalu cepat bisa dengan menambahkan remover element kedalam function setTimeout();

Dan ini full demonya

___

Oke pie mblo? Cukup sekian dari saya hari ini, kita berjumpa diposting yang akan datang.