MEMBUAT ANIMASI LOADING MENGGUNAKAN LOADER

Anda mungkin pernah bingung bagaimana membuat progress loading untuk website? Tahukah Anda, bahwa banyak sekali penyedia CSS loader yang ternyata sangat mudah digunakan dan cukup menarik. Salah satu Website penyedia CSS Loader adalah CSS Load, pada website ini Anda bisa menemukan loader dalam bentuk text dan mode graphic. Jika Anda tertarik,  berikut langkah sederhana untuk menambahkan Loading Animation ke dalam HTML menggunakan kode dari CSS Loader
Anda bisa memulai dengan mengakses Website CSS Loader. Pada website ini anda akan dibebaskan untuk memilih beberapa Animation Loader yang Anda butuhkan.Ketika telah masuk pada website, maka Anda akan melihat beberapa menu. Berikut penjelasan dari menu tersebut

• Select your loader: Merupakan tempat pemilihan mode dari loader yang ada. terdapat mode grafik dan mode teks, secara dasar mode yang ditampilkan adalah mode grafik. Untuk mengakses mode text Anda dapat mengakses pada bagian kanan menu.
• First color: Merupakan warna dasar dari loader yang telah Anda pilih, dan secara otomatis warna akan dirubah menjadi kode warna hexa sehingga Anda tidak perlu melakukan pengubahan secara manual.
• Second color: Merupakan warna kedua bagi loader yang menggunakan 2 warna
• Width & height: Ukuran lebar dan luas dari loader yang anda pilih.
• Speed: Mengatur kecepatan dari kecepatan loader yang sudah anda pilih.
• Reverse animation: Mengubah putaran animasi yang sebelumnya searah jarum jam, menjadi berlawanan dengan arah jarum jam.
• get code: Tentu saja mendapatkan code berbentuk css yang bisa anda gunakan pada website anda.

Sedangkan untuk percobaan background, terdapat 4 kotak contoh background pada kotak sebelah kanan. Terdapat pilihan warna hitam, putih, transparan dan bentuk RGB.
Ketika langkah tersebut telah selesai, maka akan muncul pop up kode hasil dari customisasi. Untuk menggunakannya Anda tinggal melakukan copy paste pada kode tersebut. Untuk menggunakannya Anda bisa mulai dengan memisahkan kode tersebut menjadi file HTML dan CSS.

HTML

CSS
Maka akan menjadi seperti berikut.
Anda pun dapat melakukan beberapa pengubahan manual jika memang ingin dan tidak ingin melakukan generate kembali.

• Untuk merubah warna anda dapat melakukan pengubahan pada class .windows8 .wBall .wInnerBall terdapat kode background Anda bisa mengubah sesuai dengan kemauan Anda.
• Sedang kan, jika ingin mengubah ukuran dari loader anda bisa memulai dengan mengubah width dan height dari class .windows8 .wBall dengan kebutuhan anda.

From : bisakomputer.com