13 Solusi Loading Animation dengan CSS3 and jQuery

Sumber daya terbesar CSS3 dan jQuery Loading animasi kini hadir ditangan Anda. Anda akan terkejut melihat seri animasi menakjubkan saat menghadirkan yang terbaik untuk Anda. Sebelumnya loading animasi itu sulit dan dibatasi hanya untuk format Gif tapi sekarang dengan teknologi yang kuat dan browser (kanvas dan VML), Anda juga dapat load dengan CSS3 dan jQuery. Hal ini sangat sesuai dan server memberi Anda kelancaran dalam proses permintaan yang dibuat oleh Anda.

Ada beberapa CSS3 dan jQuery yang dapat meload animasi tapi tidak semuanya dapat bekerja di browser lama. JavaScriptVML dan kanvas didukung oleh spin.js dan indikator aktivitas. jQuery plugin menjadi spinner menggunakan vml vs SVG. Yang memiliki fungsi yang sama dengan spin.js selain mengandalkan jQuery. Script ringan dengan transparansi alpha, konfigurasi tinggi dan resolusi independen. Selain itu ia bekerja di browser utama dan kemungkinan memiliki fitur deteksi.

Plugin kanvas loader ini berguna dan lebih baik daripada tipe gif animasi loading. Loader adalah berbasis kanvas dan memiliki lebar dan tinggi yang sama. Plugin ini berguna untuk mengembangkan aplikasi mobile untuk dilihat pada Android. Yang memungkinkan Anda memeriksa dukungan kanvas sebelum penggantian. Kita memiliki Heartcode CanvasLoader menggunakan kanvas HTML5 untuk menyesuaikan preloader melingkar. Ini dari library JavaScript UI. Spin.js mendukung browser lama dan memiliki UI untuk menyesuaikan preloader Anda. Yang memiliki konfigurasi yang tinggi, mendukung browser utama dan independen dari resolusi. Spin.js menggunakan VML sebagai emergency di Iess lama. Salah satu hal yang terpenting adalah bahwa browser Anda harus mendukung kanvas. Selain itu ukuran file kecil dengan ~3k mengecilkan dan sangat dapat dikonfigurasi.

Ajax load sangat berguna dan digunakan untuk standar animasi loading. Anda dapat membuat icon yang Anda inginkan dengan cara memilih jenis indikator dan mengubah warna background serta kode foreground. Drop down adalah solusi lain dalam menu navigasi dengan JavaScript. Chimply memberikan beberapa animasi lingkaran yang berguna dan telah menghasilkan sekitar 18.131 gambar untuk Anda. Anda juga bisa mendapatkan kategori tiga dimensi dari lingkaran, horizontal, persegi panjang, smiley, rambu agama dan rambu mozaik.

CSS3 dan jQuery Loading Animation

BttrLazyLoading

betterlazyload

Load gambar dalam viewport saja. Menyajikan gambar responsif untuk 4 ukuran layar.

Spin.js

1109

Spin.js adalah plugin mungil yang memungkinkan Anda membuat spinner vektor monokrom. Salah satu keuntungannya adalah ia dapat bekerja tanpa JavaScript dan didukung oleh mayoritas browser populer termasuk juga aneh karena bermasalah di IE6. Kustomisasi ini mengasumsikan pengaturan untuk karakteristik seperti :

  • Jumlah dan panjang garis
  • Opacity dan ketebalan garis
  • Radius dalam lingkaran
  • Rotasi offset dan arah
  • Posisi, bayangan dan beberapa yang lainnya

Menggunakan antarmuka intuitif untuk tune up.

CSS3 Loading Animation Loop

280

Loading animation loop memiliki penampilan yang terang seperti gaya neon. Alessio ATZENI menawarkan 3 jenis efek preloading berbasis CSS3 yang terlihat sangat bagus pada background gelap. Komponen ini dapat dikontrol dengan tombol play/stop.

Ada tutorial yang menunjukan langkah demi langkah cara membuatnya dari awal. Adapun kelemahannya hanya dapat bekerja pada Safari, Firefox dan Chrome.

CSS3 Loading Animation

350

CSS3 Loading Animaton terlihat mirip dengan spinner sebelumnya. Ada 3 jenis yang loading animasi yang berbeda. Yang pertama memiliki getaran melingkar, yang kedua adalah solusi linear standar dan yang ketiga terdiri dari satu set blok.

CSS3 Loading Animation juga memiliki warna kebiruan yang bagus disertai effect. Masing-masing dapat di start, restart, dan pause sesuai permintaan.

Loadie

loadie

Bar halus yang bagus menunjukan bahwa halaman yang sedang meloading sesuatu. Loadie.js adalah plugin jQuery yang ringan untuk membuat preloader yang tidak mengisap bandwith dan juga digunakan oleh perusahaan-perusahaan besar.

CanvasLoader Creator

447

Memanfaatkan library UI reguler, intuitif, fleksibel dan resolusi independent online tool ini melengkapi Anda dengan semacam pengaturan umum untuk membuat dan menyesuaikan Throbbers. Anda dapat menetapkan :

  • Diameter dalam lingkaran
  • Kecepatan animasi
  • Range dan kepadatan
  • Warna dan warna background

Terlebih lagi, Anda juga dapat memilih antara beberapa bentuk standar termasuk oval, persegi, persegi panjang, spiral dan persegi panjang bulat.

Loading CSS spinner and bars generator for AJAX dan Jquery

727

Disini Anda akan menemukan koleksi indikator status dinamis. Generator ini memungkinkan Anda untuk membuat CSS murni dan komponen HTML. Jangkauannya meliputi versi seperti berikut :

  • Spinner melingkar
  • Horizontal bar
  • AJAX loader 3D
  • Komponen berbasis teks animasi
  • Dan beberapa orang lain yang gagal untuk menemukan tempat yang tepat dalam direktori pada daftar diatas.

Hanya mengambil kategori yang diinginkan, jenis komponen dan copy potongan kode.

CSS3 loading spinner without images

925

CSS3 loading spinner without image adalah solusi yang bagus bagi Anda yang mencari indikator ringan yang tidak akan membebani proyek dengan grafis yang tidak perlu. Menggunakan CSS mengubah properti yang didukung oleh Firefox 3.5+ dan browser berbasis WebKit, authot dikelola untuk membangun spinner indah dari bar primitif dan lingkaran.

Bouncy Animated Loading Animation

1025

Ini salah satu solusi yang bagus, terlihat lebih bersih, sederhana dan elegan untuk menunjukan bahwa terdapat proses yang sedang dilakukan. Ini juga alternatif yang sempurna untuk Gif. Bouncy Animated Loading Animation ini terdiri dari 3 bola monokrom yang relatif kecil yang lancar naik dan turun. Anda dapat mengatur suasana yang berbeda dan bahkan memanipulasi dengan animasi jika Anda sudah familiar dengan CSS3 dan HTML.

Sonic – loaping loaders

1129

Ini adalah class JS yang super minified dengan mengenakan grafis dengan energi, membuat sebuah spinner standar untuk indikasi status. Meskipun komponen terlihat primitif, namun mengalami crash di IE karena itu adalah canvas-based.

Adapun kustomisasi tersedia untuk orang-orang tech-savvy yang memahami dasar CSS dan HTML. Jika tidak, mengambil yang diinginkan salah satu bentuk versi 9 dinamis yang telah ditetapkan.

Simple Loading Modal

1227

Plugin ini melengkapi projek Anda dengan kotak modal dengan throbber reguler melingkar dan background semi-transparan dengan cahaya yang elegan. Muncul ketika dimulai dan memudar dengan anggun ketika semuanya sudah siap.

Image Loader (jQuery Plugin)

1424

Image Loader adalah animasi loading premium yang bernilai sedikit lebih dari $5. Ia dapat bekerja pada iOS dan platform Android serta kompatibel dengan browser modern dan jQuery 1.3+. image loader memiliki antarmuka yang intuitif yang memungkinkan mengubah loader dalam satu klik dan mengubah ukuran gambar setelah mereka telah diload. Ada juga fungsi Cache dan pilihan untuk memanggil fungsi pada load success/error.

Simple Content Loader

1524

Simple Content Loader ditunjukan untuk menemani gambar dan teks serta membantu pengguna untuk menerangi detik menunggunya. Ini adalah loader AJAX biasa yang bisa membanggakan dari desain yang hebat. Namun, author telah menyiapkan satu set tool untuk kustomisasi tambahan. Adapun harga, produk biaya $5.

 

Comments

comments