Tutorial Membuat Pre-Loader Web dengan CSS

Preloader CSS merupakan salah satu fungsi dimana kita membuat suatu animasi loading untuk sebelum memuat sebuah halaman tersebut selesai dimuat, maka dari itu Saya ingin membuat tutorial sederhana bagaimana membuat preloader di HTML5 dengan CSS standar ūüôā

 

  1. Buatlah sebuah HTML5 dengan full content, sebagai contoh saya bagikan source HTML5 yang saya pakai tutorial kali ini
  2. Berikut file yang harus dibuat
    Рindex.html : http://pastebin.com/1htnxBY8
    Рcustom.css : http://pastebin.com/Xzn73sDT
    Рjquery.js     : http://pastebin.com/D5BHMacP
    Рmaterialize.css : http://pastebin.com/FwJREQ95
    Рmaterialize.js : http://pastebin.com/RFBMz0RM
    Рmobile.js : http://pastebin.com/g1gfev7n
    Рpreloader.css : http://pastebin.com/Vws9LC3p
    Рpreloader.js : http://pastebin.com/nAfn2gLx
    Рselect.js : http://pastebin.com/Qf6BX7yS
    Рslider.js : http://pastebin.com/1k3gMSRA
    Рtop.js : http://pastebin.com/7Gqw0idd
    Рlogo: Dream Line Host
  3. Pada bagian file index. html di bagian bodi terdapat kodingan

    penjelasan: ¬†bagian kodingan diatas tepatnya id preloader & status merupakan kodingan tersebut memanggil dari file preloader.js dan preloader.css, kenapa saya menggunakan  ¬†karena kode tersebut hanya sebuah karakter spasi. jadi intinya, cukup memanggil id preloader dan status tersebut.
  4. Gambar loading animasi merupakan file format.gif, gambar dapat diunduh dibawah ini
    loading_animation
  5. Lihatlah hasilnya, makan akan seperti gambar dibawah ini
    Preloader
    Dream Line Host
    Setelah Preloader
    Dream Line Host

Sekian tutorial singkat membuat preloader web pada css atau yang biasa disebut Lazy Load.

Salam Ryfan.NET !

hosting litespeed indonesia, hosting litespeed murah hanya di https://dreamlinehost.com