Cara Membuat Loader Animation Dengan CSS – Pada kesempatan kali ini, saya ingin membuat tutorial cara membuat loader animation dengan CSS. Pernah gak sih ketika kalian mengunjungi sebuah situs web namun sebelum website tersebut terbuka dengan baik kalian melihat page loading? Itulah yang dinamakan dengan Loader Animation, tapi ini biasanya disebut dengan Preloader. Pada artikel ini, kita akan membuat nya hanya dengan CSS (pure CSS) dengan kode yang sangat simpel.
Cara Membuat Loader Animation Dengan CSS
Disini kita tidak menggunakan jQuery apapun, hanya mengandalkan HTML dan CSS saja. Silahkan simak tutorialnya dibawah ini:
Langkah 1: Membuat File HTML
Jadi, yang pasti kita lakukan adalah membuat struktur file HTMLnya terlebih dahulu, disini kita hanya perlu satu tag div yang kemudian nanti kita buat menjadi 5 div, contohnya seperti ini <div class="loader">. Nah untuk kode script yang lebih lengkap kira-kira seperti dibawah ini, silahkan anda ketik jangan di copy-paste ya:
Jika sudah selesai di ketik, simpan dengan nama index.html.
Langkah 2: Membuat Loader Animation
Nah saatnya kita bikin file CSS untuk membuat loader animation atau preloader nya, silahkan anda ketikkan kode CSS dibawah ini:
PENJELASAN KODE DIATAS
Pada kode CSS diatas, terdapat id #container yang digunakan sebagai wadah atau pembungkus dari isi halaman kita, jadi kita atur width dan height nya sebesar 200px, kemudian posisi kita ubah menjadi absolute supaya bisa keluar dari parentnya dan kita ubah supaya posisi berada di tengah dengan bantuan top dan left (fitur ini bisa digunakan jika kita membuat position: absolute;) dan juga fitur dari CSS 3 yaitu transform: translate(-50%, -50%); untuk mengubah posisi secara horizontal dan vertikal. Sedangkan overflow: hidden; berfungsi untuk tidak memisahkan element yang kita punya ketika tag div di buat menjadi 5. Berikut ini adalah perbedaannya.
Terlihat perbedaannya, kan? Jika tidak menggunakan
overflow, maka element akan dipisahkan atau keluar dari jalurnya, namun jika ada
overflow, berarti element kita tidak dipisah dan akan tetap berada didalam elementnya.
Kemudian kita akan tambahkan div nya menjadi 5 seperti script dibawah ini:
Nah jadi seperti itu lah cara membuat loader animation atau preloader dengan menggunakan CSS, cukup simpel kan?