Membuat Animasi Loading dengan CSS

24/12/2014    Rully Febrian    3009     Website

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 :

Membuat-Animasi-Loading-dengan-CSS

Kemudian buat keyframe CSS dengan nama loader seperti berikut :

Membuat-Animasi-Loading-dengan-CSS

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

Membuat-Animasi-Loading-dengan-CSS

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

DEMO

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More