@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 2s linear infinite; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script> gsap.to(".loading", { rotation: 360, repeat: -1, duration: 2 }); </script>
<img src="loading.gif" alt="Loading" />
1. Animasi Preloader Pensil
Kita akan mulai dengan animasi prapemuat tak terbatas yang memukau oleh Mantas Bačiuška . Gaya seni garis besar yang sederhana namun efektif semakin memudahkan untuk melihat betapa mulusnya animasi dilakukan.
2. Pemuat Situs Segitiga Lompat
Di sini kita memiliki preloader segitiga dari Majo Puterka yang melompati layar dan mengisi daya sendiri. Ada banyak perhatian terhadap detail dengan sedikit bayangan bergerak. Banyak yang harus dilihat sambil menunggu halaman dimuat.
3. Prapemuat Halaman Alpukat
Interaksi pemuat alpukat oleh Taras Migulko ini memiliki sedikit karakter alpukat yang sedang bermain-main dengan sayuran. Perancang membuat animasi pemuatan halaman untuk situs web pengelola karbohidrat yang didedikasikan untuk makan sehat dan diet keto. Contoh yang bagus, Anda juga dapat membuat konsep dan meletakkan sesuatu yang menyenangkan terkait dengan bidang pekerjaan Anda untuk membuat pengunjung Anda sibuk saat situs web Anda sedang dimuat.
4. Pemuat Situs Web Minimalis
Animasi Loading Gif oleh Dilys Lim dan Sharon Yar ini sederhana dan minimalis. Anda dapat memeriksa seluruh koleksi gif animasi loader di sini . Karena kesederhanaannya, animasi ini cocok untuk aplikasi dan game seluler, namun juga terlihat cukup rapi di situs web.
5. Halaman Es Krim Meleleh Memuat Gif
Berikut adalah animasi pemuatan es krim yang meleleh oleh desainer yang sama.
6. Pemuat Halaman Starcruiser Alien Invaders
Dan sesuatu yang terinspirasi oleh game 8-bit masa kecil favorit kami.
7. Halaman Pemuatan Truk Garbade
Beralih dari gaya minimalis, kami memiliki animasi pemuatan truk sampah oleh Ravikanth Buddiga sebagai saran kami selanjutnya.
8. Prapemuat Situs Web Ping Pong Sederhana
Preloader ping pong yang sederhana dan efektif oleh Rincy David menghitung persentase, membuktikan kreativitas dapat melakukan apa saja meskipun harus berkreasi hanya dengan garis dan lingkaran.
9. Animasi Preloader Halaman Pembotolan
Ini adalah animasi mikro pemuatan oleh Nick Buturishvili untuk Leavingstone.
10. Animasi Pramuat Panike
Di sini kami memiliki salah satu animasi pemuatan sebelumnya untuk situs web Panike yang ditambahkan oleh Awwwards .
11. Layar Pemuatan Permainan Kata
Contoh luar biasa memuat urutan teks animasi untuk Hochburg ditambahkan oleh Awwwards.
12. Prapemuat Situs Web Dachshund yang Menyenangkan
Kreativitas tidak mengenal batas. Begitu pula dengan karakter dachshund lucu dari situs ITG yang berjalan dalam dua arah berlawanan dan melakukan peregangan.
13. Layar Preloading Telur Ayam Bertelur
Situs web ini tergila-gila pada telur dan memberi tahu Anda sejak dimuat.
14. Animasi Pemuatan Situs Web Interaktif
Prapemuat Stained Glass Real Estate menawarkan interaksi dengan memutar video dan memungkinkan Anda mewarnai bentuk dan karakter saat diputar. Anda juga dapat meninjau dan membagikan kreasi Anda setelah selesai.
16. Pemuat Halaman karakter 3D
Berikutnya adalah prapemuat situs web luar biasa untuk Manusia , yang menyiapkan semua karakter 3D keren itu.
17. Animasi Pemuatan Modern Es Krim
Tolia Ice Cream memberi kita animasi pemuatan keren dengan es krim menunggu suhu turun saat situs web sedang memuat. Semakin rendah suhunya, karakter es krim ini akan semakin bahagia.
18. Layar Pemuatan Situs Web Kacamata
Di sini kita memiliki animasi konseptual yang sederhana dan efektif untuk desain Mata Malas .
19. Preloader Situs Web Animasi Kalender
Ini adalah animasi pramuat lama untuk Grupow, yang masih dapat Anda nikmati di Awwwards .
20. Lebih Banyak! Animasi Preload Susu
Ini adalah prapemuat video yang sangat ringan dari Chipsa untuk situs web Rissian More!milk.
21. Prapemuat Situs Web Burger
Kami ikuti dengan animasi melompat burger loader oleh Rehana Khan yang dibuat di AE.
22. Animasi Preloader Kopi
Mantas Bačiuška memberi kita kecintaan pada kopi dengan konsep preloader situs web animater abstrak ini.
23. Menjalankan Desain Pemuatan Logo
Dalam preloader situs web ini, Mantas Bačiuška menghidupkan logo Šviesa Publishing House dengan animasi yang sedang berjalan.
24. Layar Pemuatan Unilever
Kami melanjutkan animasi pemuat halus yang dibuat oleh Maksym Havrylov untuk Unilever.
25. Prapemuat Situs Web Panjang Gelombang
Animasi pemuatan panjang gelombang yang bersih dan minimalis oleh Niklaus Gerber .
26. Animasi Pemuatan Halaman Tipografi
Prapemuat ini untuk laman landas tentang tipografi, dirancang oleh Oleksandra Ryzhyk .
27. Preloader Situs Web Dekonstruksi Jam
Animasi pemrosesan yang sederhana dan efektif untuk situs web oleh Oleg Frolov .
28. Animasi Preloading Jalan Isometrik
Animasi bergaya isometrik ini adalah cuplikan dan bagian dari proyek yang lebih besar oleh EuroART93 .
29. Preloader Animasi Intro
Di sini kita memiliki eksplorasi animasi intro dari preloader ke halaman arahan, oleh Matthew Hall . Saat diklik, gambar akan jatuh, setelah Anda mencapai akhir galeri, gambar tersebut akan hilang.
30. Prapemuat Situs Web Animasi Cube
Animasi pramuat kubus gelembung yang sangat halus, surealistik, dan memukau Oleg Frolov .
31. Animasi Layar Pemuatan Spiral
Ini adalah konsep pra-pemuat spiral bercahaya neon futuristik oleh Alex Gorbunov.
32. Preloader Situs Web Neon dengan Nomor Digital
Pada topik futurisme dan aksen neo, Kushagra Agarwal merancang dan mengkodekan animasi layar pemuatan yang sepenuhnya responsif untuk tema Gelap.
33. Pemuatan Cairan
Yang berikutnya memiliki konsep yang sangat orisinal untuk eksperimen prapemuat cair oleh Denis Krol Krasavchikov .
34. Animasi Pramuat Apple
Pencipta Anatoly Kotlyar mencoba membuat penantian tidak terlalu membosankan, dengan animasi visual yang menyenangkan, yang akan membuat pengguna terhibur. Mereka membuat preloader animasi ini untuk CXDojot dengan After effect untuk kemudian diekspor sebagai JSON sehingga ringan dan cepat dimuat.
35. Hei! Puf! Prapemuat Situs Web Eksperimental
Hanya animasi pramuat eksperimental oleh Igor Mahr yang kami harap dapat dilihat secara langsung suatu hari nanti.
36. Pemuat Situs Roket
Animasi logo konsep oleh Yurii untuk situs web klien mereka.
37. Animasi Preloader Isometrik Kubus
Di sini kita memiliki animasi 3D isometrik yang sangat profesional dan kompleks dalam menata ulang kubus oleh Webshocker Matjaz Valentar .
38. Prapemuat Situs Web Neon Bubble
Preloader cair karya Denis Krol Krasavchikov dengan warna neon yang menghipnotis.
39. Prapemuat Aplikasi Seluler Tebal
Animasi pramuat oleh Arounda ini didasarkan pada log merek Bold untuk Aplikasi Seluler. Sekarang mari kita lihat beberapa ide prapemuat situs web hebat yang juga menawarkan animasinya secara gratis.
Prapemuat Situs Web CSS/JS Gratis
Di bagian ini, kita akan melihat enam preloader CSS luar biasa yang dapat Anda gunakan. Tombol di bawah masing-masing menawarkan kode HTML/CSS/JS yang dapat Anda salin untuk proyek Anda.
40. Animasi Pemuatan CSS/JS Gratis dengan Fisika
Kita akan mulai dengan animasi Loading yang sederhana namun berbeda ini dengan tambahan fisika oleh Oleg Frolov , dibuat dengan Figma, Cinema 4D, dan After Effects. di bawah ini Anda dapat meninjau kodenya, milik Abubaker Saeed berdasarkan desain yang sama.
Ambil kode41. Animasi Pemuatan Buku CSS Murni
Desain Book Loader berikutnya oleh Su untuk RaDesign juga dilengkapi dengan CSS murni oleh Aaron Iker . Ini sentuhan yang bagus untuk toko buku online dan situs web pendidikan.
Ambil kode42. Preloader Situs Web CSS oleh FXGround Bagian 1
Ini adalah bagian pertama dari animasi CSS gratis untuk situs web dan aplikasi oleh FXGround. Ada 12 prapemuat gratis yang tidak akan memengaruhi kecepatan halaman dan Anda dapat menggunakannya untuk melakukan pramuat situs web, gambar, atau konten AJAX Anda.
Ambil kode43. Preloader Situs Web CSS oleh FXGround Bagian 2
Dan inilah bagian kedua yang menampilkan 12 lainnya dengan prinsip yang sama. Anda dapat mengklik tombol Unduh Sumber untuk meninjau kode.
Ambil kode44. Animasi CSS Layar Pemuatan Ping Pong Gratis
Ide lain untuk animasi pemuatan CSS. Dilakukan pada Prinsip untuk bersenang-senang dan berlatih oleh Oleksandr Pronskyi .
Ambil kode45. Ketuk Kaki Animasi Pemuatan CSS/JS
Dan contoh terakhir yang juga bisa Anda gunakan secara gratis datang dari Darin dengan ketukan kaki yang gugup.
Penutup
Sekian Penjelasan Singkat Mengenai Animasi pre Loading pada Website dan Blog yang Unik dan Menarik. Semoga Bisa Menambah Pengetahuan Kita Semua.
