10 Contoh Loading Blog Keren dan Menarik

Pada artikel ini saya share beberapa contoh kode script Loading blog yang sederhana dan bisa di kembangkan lagi dan di sesuaikan dengan tema blog anda

Loading animation atau efek pemuatan adalah elemen penting pada sebuah website maupun blog modern. Selain membuat tampilan lebih profesional, loading juga membantu pengunjung mengetahui bahwa halaman sedang diproses.

Banyak blogger dan pengembang web kini menggunakan loading screen agar blog dan websitenya terlihat lebih premium, modern, dan interaktif.

Berikut ini adalah 10 contoh loading blog keren dan kode scriptnya yang bisa anda gunakan sebagai inspirasi.

1. Spinner Loading

Spinner adalah loading paling populer karena ringan dan mudah dibuat. Efek ini biasanya digunakan pada halaman login, komentar, hingga halaman artikel.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Spinner Loading </div> <style> @keyframes spin{ 100%{transform:rotate(360deg);} } </style> <div style="text-align:center;padding:30px"> <div style="width:50px;height:50px;border:6px solid #ddd;border-top:6px solid #3498db;border-radius:50%;margin:auto;animation:spin 1s linear infinite"></div> </div>

2. Dot Loading Animation

. . .

Loading titik-titik terlihat minimalis dan elegan. Sangat cocok untuk blog modern dengan desain clean.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Dot Loading Animation </div> <style> .dot1,.dot2,.dot3{ animation:blink 1.5s infinite; } .dot2{ animation-delay:.2s; } .dot3{ animation-delay:.4s; } @keyframes blink{ 0%,100%{opacity:.2} 50%{opacity:1} } </style> <div style="text-align:center;font-size:40px;color:#3498db"> <span class="dot1">.</span> <span class="dot2">.</span> <span class="dot3">.</span> </div>

3. Pulse Loading

Efek pulse memberikan animasi denyut yang lembut sehingga tampilan blog terasa lebih hidup.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Pulse Loading </div> <style> .pulse-box{ width:60px; height:60px; background:#3498db; border-radius:50%; animation:pulse 1s infinite; } @keyframes pulse{ 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.5);opacity:0} } </style> <div style="display:flex;justify-content:center;padding:20px"> <div class="pulse-box"></div> </div>

4. Skeleton Screen

Skeleton screen sering digunakan pada website besar karena membuat loading terasa lebih cepat.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Skeleton Screen </div> <div style="background:#f5f5f5;padding:15px;border-radius:10px"> <div style="height:20px;background:#ddd;border-radius:6px;margin-bottom:10px"></div> <div style="height:20px;background:#e5e5e5;border-radius:6px;margin-bottom:10px;width:80%"></div> <div style="height:20px;background:#ddd;border-radius:6px;width:60%"></div> </div>

5. Progress Bar Loading

Progress bar cocok digunakan untuk halaman download atau generator tool di blog.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Progress Bar Loading </div> <style> .bar-loading{ height:100%; width:40%; background:linear-gradient(90deg,#3498db,#00c6ff); animation:bar 2s infinite; border-radius:20px; } @keyframes bar{ 0%{width:0} 100%{width:100%} } </style> <div style="background:#ddd;border-radius:20px;overflow:hidden;height:22px"> <div class="bar-loading"></div> </div>

6. Typing Loading

Animasi mengetik membuat blog terlihat modern dan cocok dipakai pada landing page.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Typing Loading </div> <style> .typing{ animation:typing 1s infinite; } @keyframes typing{ 0%{opacity:0} 50%{opacity:1} 100%{opacity:0} } </style> <div style="text-align:center;font-size:24px;font-weight:bold"> Loading<span class="typing">...</span> </div>

7. Neon Loading

Efek neon memberikan kesan futuristik dan keren terutama untuk blog teknologi.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; font-family:Arial; } .neon-loader{ width:70px; height:70px; border:6px solid #00ffcc; border-top:6px solid transparent; border-radius:50%; margin:auto; box-shadow:0 0 20px #00ffcc; animation:spin 1s linear infinite; } @keyframes spin{ 100%{ transform:rotate(360deg); } } </style> <div class="box"> <h2>Neon Loading</h2> <div style="text-align:center;padding:20px"> <div class="neon-loader"></div> </div> </div>

8. Gradient Loading

Gradient animation sangat populer karena terlihat smooth dan premium.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Gradient Loading </div> <style> .gradient-loading { height:18px; border-radius:20px; background:linear-gradient(90deg,#ff0080,#7928ca,#00c6ff); background-size:300% 300%; animation:gradientMove 3s infinite; } @keyframes gradientMove{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }</style> <div class="gradient-loading"></div>

9. Wave Loading

Wave loading menghasilkan gerakan seperti gelombang yang menarik perhatian pengunjung.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; } </style> <div class="box"> Wave Loading </div> <style> .wave-wrap{ display:flex; justify-content:center; gap:5px; padding:20px; } .wave-wrap div{ width:8px; height:40px; background:#3498db; animation:wave 1s infinite; } .wave-wrap div:nth-child(2){animation-delay:.1s} .wave-wrap div:nth-child(3){animation-delay:.2s} .wave-wrap div:nth-child(4){animation-delay:.3s} .wave-wrap div:nth-child(5){animation-delay:.4s} @keyframes wave{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(2); } } </style> <div class="wave-wrap"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

10. Fullscreen Overlay Loading

Memuat Halaman...

Loading fullscreen sering digunakan pada blog premium untuk memberikan pengalaman pengguna yang lebih elegan.

Lihat Kode <style> .box{ padding:20px; background:#f5f5f5; font-family:Arial,sans-serif; } @keyframes spin{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } </style> <div class="box"> <h2>Fullscreen Overlay Loading</h2> <div style="background:#111;color:#fff;padding:30px;border-radius:10px;text-align:center"> <div style="width:45px;height:45px;border:5px solid #444;border-top:5px solid #00ffcc;border-radius:50%;margin:auto auto 15px;animation:spin 1s linear infinite"></div> Memuat Halaman... </div> </div>

Kesimpulan

Menggunakan loading animation pada blog dapat meningkatkan pengalaman pengguna dan membuat tampilan website terlihat lebih menarik. Namun pastikan jika anda ingin mengedit haruslah efek loading ini tetap ringan agar tidak memperlambat kecepatan blog.

Nah itulah 10 contoh efek loading yanf bisa saya share kali ini, mungkin di lain waktu akan saya tambah lagi efek² dan kode script lainnya,, pilihlah jenis loading yang sesuai dengan tema blog anda. Tips Untuk blog minimalis gunakanlah dot loading atau skeleton screen, sedangkan blog teknologi cocok menggunakan neon atau gradient loading.

Akhir kata Terimakasih telah menyimak postingan ini, semoga bermanfaat

Pertanyaan Umum (FAQ)

Apa fungsi loading animation pada blog?

Loading animation berfungsi untuk memberi tanda kepada pengunjung bahwa halaman sedang memproses data atau memuat konten. Selain meningkatkan pengalaman pengguna, loading juga membuat tampilan blog terlihat lebih modern dan profesional.

Apakah loading animation membuat blog menjadi lambat?

Tidak selalu. Jika dibuat dengan CSS sederhana dan ukuran file ringan, loading animation tetap cepat dan aman digunakan. Namun penggunaan animasi berlebihan atau file JavaScript besar dapat mempengaruhi performa blog.

10 Contoh animasi Loading keren untuk blog (ringan dan seo friendly)