7 Animasi Pre-Loader Keren dengan CSS3

Pertama-tama, maaf telat posting karena seharusnya di publish kemarin. Maaf membuat anda menunggu (emang ada?). Awalnya saya akan memposting artikel ini sore kemarin, tapi ternyata ada sedikit masalah koneksi internet di rumah. Jadi, baru sempet sekarang..

Sudah 2 minggu yang lalu sejak saya terakhir kali posting tutorial tentang coding. Terakhir adalah tentang Cara Custom CSS & JS Per Post. Kali ini, saya akan kembali dengan coding. Tepatnya adalah mengenai tutorial membuat animasi pre-load keren saat sebuah halaman website dimuat dengan 7 pilihan.

7 Pilihan animasi loading

Animasi Pre-loader adalah animasi yang berjalan saat sebuah halaman website sedang di-load. Animasi ini bisa berupa gambar gif, progress bar dengan javascript/jquery, atau animasi CSS3. Pada tutorial ini, yang dibahas adalah mengenai animasi CSS3, dengan sedikit bantuan dari jquery. Kelebihan dengan menggunakan animasi CSS3 untuk perloader ini adalah lebih ringan dan irit source dibanding dengan gambar atau jquery.

Sebelum membahas bagaimana cara menambahkannya pada situs atau blog anda, berikut ini adalah 7 pilihan animasi yang bisa anda pilih salah satunya.

1. Audio Wave

Efek loading ini bergerak layaknya gelombang suara.

2. Circular Square

Efek loading dengan perubahan bentuk elemen yang berputar-putar

3. Crossing Shapes

Efek animasi loading dengan bentuk elemen yang berganti-ganti serta saling menyilang

4. The Snake

Animasi loading website ini menyerupai seperti seekor ular yang sedang melata.

5. Spinning Disc

Animasi pre-load yang berputar-putar layaknya disket yang sedang bekerja.

6. Glistening Windows

Animasi pre-loading blog ini menyerupai ikon windows yang berputar-putar.

7. Big Spinning

Sama seperti nomor 5, animasi ini berbentu lingkaran berputar-putar, namun lebih dinamis.

Yap, itulah ketujuh animasi preloader yang bisa anda pilih. Oh ya, perlu anda ketahui bahwa pada beberapa browser mungkin pre-loader diatas ada yang tidak berfungsi. Hal ini karena untuk bisa menampilkan animasi CSS3, beberapa browser menggunakan prefix tertentu pada properti kode css-nya.

Pada demo di atas, saya membuatnya hanya support untuk browser chrome dan browser lain yang versinya sudah tinggi. Jika tidak berjalan pada browser anda, cobalah untuk mengupdate atau mengganti browser anda. Selengkapnya mengenai cross browser animasi CSS, anda bisa baca di sini :

Mengenal Animasi CSS3

Jika anda ingin mendownload semua animasi diatas, silahkan Klik link dibawah ini :

Download 

Cara Menambahkan Animasi Pre-loader pada Blogger/Blogspot

Untuk menampilkan animasi loading ini pada blog anda, silahkan ikuti langkah-langkah dibawah :

1. Pilih salah satu style dari 7 pilihan di atas yang anda sukai. Kode CSS dan HTML-nya di copy karena akan dipakai di langkah selanjutnya.

2. Login ke Blogger Dashboard > Pilih Blog > Template > Edit HTML.Watch Full Movie Online Streaming Online and Download

3. Pada kolom edit html, lalu tempatkan kode css preloader yang anda pilih diatas kode ]]></b:skin>

4. Untuk Kode HTML-nya, tempatkan tepat dibawah tag <body>.

5. Lalu, tambahkan script dibawah ini tepat diatas tag </head>

<script type=”text/javascript” src=”http://code.jquery.com/jquery-2.1.3.min.js”></script>
<script type=”text/javascript”>
$(window).load(function() { $(“.preload-wrapper”).fadeOut(“slow”); })
</script>

Keterangan Kode:

–  Script diatas adalah untuk memanggil dan menggunakan jquery. Fungsinya adalah agar animasi pre-loader hanya muncul saat halaman sedang di load, dan hilang ketika seluruh halaman sudah di load.

– Kode Yang berwarna merah digunakan untuk memanggil library jquery. Kebanyakan template blog biasanya sudah dilengkapi jquery. Jadi, hanya sertakan kode tersebut jika template anda belum menggunakan library jquery tersebut. Cek terlebih dahulu apakah preloader jalan atau tidak tanpa kode tersebut. Jika berjalan, maka anda tidak perlu menambahkan kode merah tersebut.

6. Terakhir, jangan lupa di save pengeditan template anda.

Cara Menambahkan Animasi Pre-loader pada Wordpress Self Hosted

Pengguna WordPress Self hosted juga bisa menggunakan animasi preloader ini. Sebenarnya, semua website juga bisa, tetapi disini saya hanya akan membahas yang paling umum saja. Untuk menambahkan animasi CSS3 preloader ini ke situs wordpress anda, silahkan ikuti langkah-langkah berikut ini :

1. Login ke Dashboard > Pilih menu Appearance > Editor. Pastikan bahwa direktori atau file tema anda sudah disetting permissionnya agar bisa di edit.

2. Pilih file “Stylesheet” (style.css), lalu tambahkan kode css animasi preloader yang anda pilih di bagian paling bawah. Klik Save.

3. Pilih File “Header” (header.php), lalu tambahkan kode html animasi preloader yang anda pilih tepat dibawah tag <body>.

4. Masih pada file header.php, tambahkan juga script dibawah ini tepat diatas tag </head>:

<script type=”text/javascript” src=”http://code.jquery.com/jquery-2.1.3.min.js”></script>
<script type=”text/javascript”>
$(window).load(function() { $(“.preload-wrapper”).fadeOut(“slow”); })
</script>

Keterangan kode sama dengan keterangan pada panambahan preloader di blogspot di atas

5. Klik Save.

Yap, selesai. Silahkan dicoba. Apabila ada kesulitan dan mengalami error, jangan sungkan untuk tanyakan di komentar. Semoga bermanfaat 🙂

~Muhammad Syakirurohman~

sumber :

– Webdesign.tutsplus.com
– ihatetomatoes.com

36 Comments

  1. Menarik, boleh dicoba.

  2. Alfarel Zaki Maulana Anam

    bagus mas patut dicoba..!
    ngomong2 kotak komentarnya biar bisa seperti punya mas Syakir gimana? (ada kotak email & website)
    Emang dari template atau ngedit sendiri? kalau ada boleh saya minta? Kalo boleh langsung dikirim via email y mas ! 😀

  3. pernah liat yang kayanya gini juga di blog DTE, tapi yang ini banyak yang baru animasinya 😀

  4. gan ini bikin blog lola kagak
    happy blogwalking hhehe

  5. Great post, this is exactly what I am looking for. Waiting for next post 🙂

  6. Ini nih yang saya cari dari kemarin, tapi keyword untuk cari di google gak tau :D. terima kasih min.

  7. Wah, keren! Izin mencoba dan share kembali.

  8. Saya sudah coba kang…. tenrnyata bisa dipakai di blogger mantap artikelnya 😀

  9. nice….

  10. permisi kang saya mau nanya, kita bisa bikin sendiri/custom animasi loading css seperti di atas di cssload.net tapi setelah klik get code saya bingung masangnya….:D
    mohon pencerahanya kang….

    maklum pemula

    • di jquery diatas kan ada kode “.preload-wrapper”, nah “preload-wrapper” diganti sama class dari loader yang dihasilkan.. misalkan cssloadnya menghasilkan markup : <div class="bubblingG">blablba..</div>, nah si “preload-wrapper” diganti jadi “bubblingG”, kalo misalnya markupnya pakai id kaya gini : <div id="bubblingG">blabla..</div>, “titik” sebelum kata preload-wrapper (“.preload-wrapper”), diganti jadi “#”, sehingga menghasilkan #preload-wrapper

  11. klo ngeletakin nyaaa di html gmna mas,
    kok malah berantakan tampilan saya

  12. keren-keren, terima kasih udah share, lagi nyari animasi loading gini tapi yang backgroundnya gelap

  13. maaf mas kalau dipakai untuk website dengan php bisa tidak? kalau bisa dipasangnya bagai mana ya? maaf masih pemula

  14. udah saya taro di script html saya ko yang keluar animasi loading nya doang ya? animasi loadingnya ga selesai-selesai -_-

  15. mas cara make di html gmn mas, muter-muter trs loadernya mksh

  16. thanks gan 🙂
    sangat bermanfaat :))

  17. mas saya udah nyoba tapi kok stelah proses loading nya sudah slesai animasi nya gak hilang-hilang dan tampilan nya keluar,,mohon di bantu mas

  18. Bagus juga setelah dicoba , mantap buat om syakir (y)

  19. Makasih gan, berhasil. 😀

  20. Saya sudah coba terapkan semua gan, tapi page gak mau muncul?
    alias selalu load preloadernya.. gak mau pindah ke page?

    sya terapkan di Web Hosting di cpanel

Tinggalkan Balasan

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