Membuat Animasi Loading dengan CSS

Loading merupakan proses mengumpulkan bagian - bagian terpisah dalam waktu tertentu. Loading biasanya ditampilkan seperti lingkaran yang berputar atau berupa angka dalam jumlah persen. Pada latihan kali ini akan dipelajari cara membuat animasi loading dengan CSS. Tidak seperti efek yang sudah dibahas sebelumnya, efek yang akan dibuat adalah efek bergelombang.

Silakan buat kode HTML sederhana seperti berikut :

Kemudian buat keyframe CSS dengan nama loader seperti berikut :

Keyframe loader merupakan proses animasi bergerak dari bawah keatas dan sebaliknya. Atur CSS class loader dan panggil animasi loader yang sudah dibuat.

Animasi Loading telah berhasil dibuat. Untuk melihat hasilnya silakan klik tombol demo dibawah ini.

DEMO