Tampilan loading biasanya digunakan ketika kita masuk, input sesuatu dan untuk mendapatkan hasilnya, kadang kita di jamu oleh tampilan loading, please wait, wait, dan lain-lain, tergantung si pembuat itu menggunakan yang mana, sebeneranya untuk apa kita membuat cara tampilan loading ini, nanti akan kita bahas, jadi jangan kemana-mana simak terus ya teman-teman.

Tampilan loading berfungsi misalnya ketika kita inputkan data, sebenarnya data kita masuk atau tidak, dan di proses atau tidak kita akan tau, jadi dengan tampilan loading kita tau bahwa inputan kita sedang di proses, dan lama tidaknya suatu loading kadang tergantung signal atau server yang di tuju, karena kadang server down atau signal kita lagi tidak bagus.

Untuk membuat tampilan loading ini saya menggunakan sebuah VueJS, dan tentunya dengan VueJS cara kita akan lebih simple, belum lagi ini salah satu framework favorite. Tentu saja untuk menggunakan vuejs teman-teman harus sudah paham tentang sebuah javascriptnya ya.

Kasus kita kali ini saya membuat sebuah form input dimana inputan itu akan menghasilkan sebuah data, dan ketika di proses akan muncul loading terlebih dahulu sebelum data itu tampil, dan tampilan loading disini saya buat menggunakan setTimeout, jadi lama loading tampil sebelum di cetak itu sekitar 2 detik saya buat. Jadi tidak tergantung signal dan server ya.

Oke langsung saja, disini saya membuat templatenya seperti ini:

Bisa dilihat saya membuat sebuah inputan form dan output dimana ketika inputan itu di isi dan di klik maka tampilan sesudah loading itu akan tampil, dan tampilan input tsb menghilang. Sekarang kita buka kode JSnya

Kode diatas adalah dimana method di klik, property load akan menghasilkan true, dan ada sebuah setTimeout dimana akan tampil 1detik dan tampilan load saya buat false lagi seperti itu, bagaimana cukup simpla bukan, dan sekarang kita lihat hasilnya:

Cara Membuat Tampilan Loading VueJS

Cara Membuat Tampilan Loading VueJS

Cara Membuat Tampilan Loading VueJS

Bagaiamana cukup simple bukan, jika teman-teman paham tentang kode di atas, sebenarnya cukup simple menggunakan javascript saja sudah cukup ko, oke saya rasa cukup sampai disini saja belajar kita tentang cara membuat tampilan loading VueJS semoga bermanfaat dan sampai jumpa pada artikel berikutnya, terimakasih.