Menambahkan animasi loading pada saat halaman website dimuat merupakan ide bagus dan caranya pun tidak terlalu sulit. Hanya menggunakan sedikit baris kode dari jQuery, CSS dan HTML kita sudah bisa membuat preloader pada halaman website kita. Dalam hal pemberian kesan terhadap seorang pengunjung yang datan pada website/ blog kita, ketika fitur ini disediakan setidaknya memberikan kesan lebih baik dari pada menampilkan sebuah halaman yang blank (putih) saja, apalagi ditambah proses load data pada site/ blog agak lama.

Keuntungan menggunakan preloader dihalaman website menurut saya sangat bagus karena membuat pengunjung tidak berburuk sangka terlebih dahulu ketika melihat tampilan website kita acak-acakan karena semua kode belum dimuat seluruhnya, dengan adanya preloader halaman website akan ditutupi sepenuhnya oleh preloader dan ketika semua kode telah dimuat oleh browser maka preloader akan otomatis menghilang dari hadapan pengunjung. Untuk ringkasan ini, berikut beberapa pilihan animasi preloader menggunakan animasi svg.

1. Collection of SVG Loaders

Jika Anda ingin mendesain untuk berbagai resolusi, SVG adalah pilihan terbaik untuk digunakan sejauh menyangkut penggunaan grafik. File vektor kecil ini dapat diubah ukurannya ke atas dan ke bawah sesuka Anda tanpa mengorbankan kualitas. SVG Loader adalah kumpulan pemintal dan pemuat SVG sederhana yang dibuat dan dirilis oleh Sam. Tidak ada gambar yang digunakan, svg / css murni dan dapat diskalakan.

2. CSS Loaders

Single Element CSS Spinners adalah kumpulan pemintal pemuatan yang dianimasikan dengan CSS. Setiap spinner terdiri dari satu div dengan kelas ‘loader’ dan teks konten ‘Memuat …’. Teks ini untuk pembaca layar dan dapat digunakan sebagai status cadangan untuk browser lama. Tujuan dari proyek ini adalah untuk membuat satu set pemintal pemuatan minimal yang menarik secara visual dan juga menyampaikan makna yang dimaksudkan. Setiap loader diberi ukuran font dalam piksel dan semua ukuran lainnya dalam ems sehingga untuk mengubah ukuran loader, cukup sesuaikan ukuran font.

3. Pure CSS & Simplistic Loader/Spinner

Lea Verou, seorang desainer web yang menginspirasi baru-baru ini membagikan solusi sederhana untuk membuat spinner dengan CSS murni. Sudah ada solusi lain tetapi yang ini adalah yang paling bersih dari semuanya, hanya menggunakan 2 elemen dan tidak banyak CSS. Semuanya diukur dengan ems, sehingga dapat diubah ukurannya sesuka hati, ini berfungsi di semua browser modern dan memiliki teks cadangan untuk orang lain.

4. Spinkit

SpinKit berisi beberapa pemintal pemuatan sederhana namun mengagumkan yang dianimasikan dengan CSS. Mereka menggunakan animasi CSS untuk membuat animasi yang halus dan mudah disesuaikan. Tujuannya bukan untuk menawarkan solusi yang berfungsi di setiap browser. Jika Anda membuat situs dengan pengguna yang menjalankan IE9 dan yang lebih lama, Anda pasti ingin mendeteksi dukungan untuk atribut animasi CSS, dan menerapkan animasi fallback (mis. GIF.)

5. Zero Element Loading

Dengan animasi pemuatan “elemen nol”, status pemuatan dapat diterapkan ke elemen apa pun hanya dengan penambahan nama kelas.

6. Spin.js

Spin.js adalah pustaka JavaScript kecil yang memungkinkan kita menghasilkan indikator pemuatan / aktivitas tanpa gambar. Ini menciptakan UI dengan CSS3 (VML di Internet Explorer) dan bekerja di semua browser (bahkan di IE6). Pemintal dapat disesuaikan dengan beberapa cara seperti mengatur jumlah garis, warnanya, panjang, lebar, radius, kecepatan animasi, dan efek jejak. Fleksibilitas seperti itu menghasilkan banyak kemungkinan variasi.

7. CSS Only Loaders

Pada artikel ini kami akan menunjukkan beberapa contoh bilah kemajuan dan indikator pemuatan yang dibuat murni dengan CSS – tanpa JavaScript dan tanpa gambar.

8. Sonic

Sonic adalah kelas JavaScript kecil untuk membuat gambar loader seperti itu dengan kanvas HTML5. Ini bekerja dengan menggambar bentuk pada interval kecil di sepanjang jalur khusus yang telah ditentukan sebelumnya di mana ukuran, warna atau fps semuanya dapat disesuaikan. Ada contoh siap pakai yang disediakan dan Sonic Creatorexists berbasis web untuk membuat pemuat dan menjadikannya sebagai kode kanvas HTML5, GIF animasi atau gambar sprite dengan kode CSS3.

9. CSS Loading Spinners

Koleksi pemintal menggunakan CSS, bingkai utama, dan animasi dasar. Tidak ada JS.

10. Loading Animation

Mereplikasi animasi loader dari http://jxnblk.github.io/loading/hanya dibuat dengan CSS / HTML, bukan SVG.

11. Block Loaders

Pilihan loader semuanya didasarkan di sekitar garis 6 blok. Menggunakan animasi CSS3 dan mengubahnya untuk membuat berbagai efek loaderan yang halus. Terinspirasi oleh animasi loaderan di situs seluler PSN (yang menggunakan contoh Flip Delay Up untuk loadernya).

12. SVG Circus

SVG Circus memungkinkan Anda membuat pemintal SVG animasi keren, loader, dan animasi loop lainnya dalam hitungan detik.

13. Nice CSS3 Based Loading Spinner

Pemutar loaderan yang tampak bagus yang membuat loader animasi untuk permintaan Ajax dengan cara yang kreatif, berdasarkan animasi CSS3.

14. Pure CSS Loader Kit

Single Element pure CSS Spinners & Loaders.

15. Animated Loaders Kit

Koleksi kecil dari 10 loader animasi khusus CSS. Barang kit ini akan menghemat banyak waktu saat membuat situs web! Mereka sangat mudah digunakan dan memiliki antarmuka yang sangat bagus.

16. SVG Loading Icons

Animated SVG for use as loading animations.

17. Loading

Loading is a collection of simple SVG loaders and spinners created and released by Jxnbln.

18. Loading.io

loading.io dibangun di atas bootstrap, angularjs, canvg, gif.js, dan require.js. Beberapa dari mereka menggunakan teknologi yang cukup baru seperti pekerja web, jadi Anda mungkin memerlukan browser yang cukup baru yang mendukung html5 untuk bermain dengan situs ini.