Oleh / CSS

Cara Membuat Animasi Preloader CSS3

Cara membuat animasi preloader dengan menggunakan CSS3 sekarang ini sudah banyak dipakai dibandingkan dengan menggunakan gambar .gif sebagai preloadernya. Preloader banyak sekali di aplikasikan pada sebuah website dan aplikasi untuk membuat desain website yang interaktif. Yang akan saya bagikan pada kali ini adalah menampilkan sebuah preloader ketika suatu halaman pada masing-masing website itu dilakukan request load.

Fungsi Animasi Preloader

Jika anda bertanya mengenai fungsi animasi preloader disini, maka tidak lain adalah membuat website lebih interaktif atau memberikan desain suatu website lebih profesional dan menarik kepada visitor. Preloader sendiri tidak akan memberatkan loading time website karena hanya menggunakan beberapa css class dan sedikit jQuery untuk membantu menampilkan preloader tersebut ketika sebuah halaman di load dan menghilangkannya ketika suatu halaman sudah selesai di load. Oke, karena cara membuat animasi preloader ini sangatlah mudah dan tidak perlu basa-basi lagi, sekarang kita akan ke tahap selanjutnya untuk membuat loader tersebut.

Struktur HMTL Animasi Preloader

Karena pada demo yang saya sertakan pada kali ini lebih dari satu desain preloader, maka saya contohkan salah satunya saja di bawah ini.

Pada struktur HTML cara membuat animasi preloader di atas, kita menggunakan class preloader pada elemen masternya. Class .preloader sendiri bisa anda letakkan sebelum penutup </body>, umumnya di letakkan pada baris terakhir sebagai elemen HTML yang sejajar dengan elemen-elemen lainnya di dalam <body>. Adapun class .signal adalah desain daripada loader itu sendiri, saya menggunakan contoh preloader dengan desain signal. Dengan adanya class .signal tentu kita akan mudah untuk mengatur preloader desain melalui css.

CSS Animasi Preloader

Karena preloader adalah kecil ukuran lebar dan tingginya, pada contoh preloader signal, saya beri ukuran 60 px pada loader signal maka di butuhkan suatu background agar preloader itu sendiri bisa terlihat jelas pada layar. Maka saya disini menggunakan pseudo-class yaitu .loading::after. Saya menggunakan pseudo-class agar supaya tidak terlalu banyak elemen html saja, dimana posisi dari .loading::after sendiri dikarenakan menggunakan posisi absolute.

Agar kita bisa mengatur posisi loader itu sendiri, maka dibutuhkan sebuah class yaitu .preloader. Loader akan kita letakkan pada tengah-tengah layar atau center.

Anda bisa langsung meng-copy dan paste code css di atas pada style.css anda

Selanjutnya kita akan menampilkan preloader tersebut dengan sedikit sentuhan jQuery.

jQuery Animasi Preloader

Sebelumnya perlu saya jelaskan mengenai code jQuery di bawah ini. Ketika user melakukan load pada halaman website, maka body akan kita tambahkan class .loading, dengan munculnya class .loading tersebut maka akan menampilkan preloader sebagaimana kita desain sesuai dengan style CSS di atas. Dan ketika halaman sudah di load secara keseluruhan, maka class .loading pada body akan dihapus sehingga preloader tidak muncul terus menerus.

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *