Preload atau halaman loading adalah elemen yang penting dalam desain web modern. Ini memberikan pengguna kesan bahwa situs web sedang memuat, sambil memberikan waktu bagi konten sebenarnya untuk dimuat. Dalam artikel ini, kita akan membahas cara membuat preload dengan menggunakan CSS dan memberikan contoh kode yang dapat Anda gunakan.
Cara Membuat Preload (Halaman Loading) Menggunakan CSS Beserta Contohnya :
1. Membuat HTML Dasar:
Pertama, kita perlu membuat struktur dasar HTML untuk halaman web kita. Berikut adalah contoh elemen dasar:
html :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Preload (Halaman Loading) dengan CSS</title>
</head>
<body>
<!– Konten halaman web Anda akan ada di sini –>
</body>
</html>
2. Membuat CSS untuk Preload:
Sekarang, mari buat CSS untuk preload. Dalam contoh ini, kita akan membuat preload dengan tampilan sederhana yang menggambarkan pemuatan. Anda dapat menyesuaikan gaya sesuai kebutuhan Anda.
css :
<style>
/* Gaya CSS untuk preload */
.preload-container {
width: 100%;
height: 100vh;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
transition: opacity 0.5s;
}
.preload-content {
text-align: center;
}
.preload-spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
3. Tambahkan Preload ke Halaman Web Anda:
Selanjutnya, Anda perlu menambahkan preload yang telah Anda buat ke halaman web Anda. Ini bisa dilakukan dengan menambahkan elemen HTML dan kelas CSS yang sesuai:
html :
<body>
<!– Preload (Halaman Loading) –>
<div class=”preload-container”>
<div class=”preload-content”>
<div class=”preload-spinner”></div>
<p>Loading…</p>
</div>
</div>
<!– Konten sebenarnya dari halaman web Anda akan ada di sini –>
</body>
Kesimpulan:
Membuat preload dengan menggunakan CSS adalah cara yang efektif untuk memberikan pengguna kesan bahwa situs web sedang dimuat. Dalam contoh di atas, kita telah membuat preload sederhana dengan animasi putar. Anda dapat menyesuaikan tampilan dan gaya preload sesuai dengan desain dan kebutuhan situs web Anda. Preload membantu meningkatkan pengalaman pengguna dengan memberikan kesan profesional dan menarik saat halaman web dimuat.