Menurut saya membuat efek loading website ketika dibuka sangat penting. Pertama, karna efek preloader di website akan memberikan kesan yang sangat profesional ( kalau design preloadernya bagus dan elegant ). Hampir sama seperti yang pertama, yang kedua yaitu website terkesan lebih interaktif. Dan yang paling penting adalah, ketika website kamu memiliki efek real loader berarti website kamu sedang memuat seluruh isi content seperti gambar, video dan code lainnya. Contoh jika tidak menggunakan pre-loader ketika internet kurang stabil, website tidak akan menampilan gambar secara utuh atau hanya value dari atribut alt saja.
Jika website tidak menggunakan efek pre-loader maka content website akan memuat secara bertahap. Ini sangat kurang bagus untuk website kamu. Karna ini dapat membuat pengunjung website menjadi tidak sabar atau bahkan bisa merasa bahwasanya website kami tidak merespon. Contohnya adalah seperti pada gambar yang ada di bawah ini:
Cara Membuat Efek Loading Website
Namun apakah kamu tau jika membuat efek loading website ketika bisa menggunakan tools apa aja? Untuk membuat efek loading website kamu perlu mempelajari Javascipt Dom, Html dan Css. Ini sangatlah mudah bahkan untuk level pemula. Jika tidak memiliki pengetahun tentang Html dan Css, hal tersebut kamu bisa mencari refrensi di Codepen CSS3 Loading animations. Dan untuk javascriptnya, kamu bisa copy saja yang sudah saya buat. Berikut cara membuat efek loader sederhana dengan versi saya sendiri:
Buatlah Struktur Html
Pertama silahkan buat struktur html sederhana pada code editor. Jika menggunakan Visual Studio Codee, kamu bisa melakukannya dengan mengklik tanda seru (shift + 1) lalu setelah itu lepas dan klik tombol tab. Setelah membuat struktur nya copy efek loader dari codepen di atas. Copy pembungkusnya terlebih dahulu, yaitu <div class=”content”></div>. Lalu di dalam nya pilih salah satu efek dan copy codenya dari <div class=”load-wrapp”> hingga ke penutupnya. Dan tidak lupa untuk menambah penghubung css dan javasciprt. Jika tidak ingin ribet bisa copy yang sudah saya buat. Sebagai contoh pada kali ini saya menggunakan efek ke-3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preloader</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="load-wrapp">
<div class="load-3">
<p>Loading 3</p>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="content">
<h1>Loading telah selesai</h1>
</div>
<script src="script.js"></script>
</body>
</html>Buat Style Css
Yang kedua adalah membuat style dengan cara mencopy dan memodifikasi sesuai selera yang anda inginkan. Agar tidak ribet, kamu copy saja semua css pada codepen. Atau bisa dengan mengikuti yang saya modifikasi dibawah ini dengan catatan telah membuat file style.css atau menambhakan tag <style></style> sebelum tag penutup </head>.
/* -----------------------------------------
=Default css to make the demo more pretty
-------------------------------------------- */
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: rgba(0, 0, 0, 0.02);
}
.content {
padding: 15px;
position: relative;
}
h1 {
padding-bottom: 15px;
font-weight: 600;
}
p {
margin: 0;
padding: 10px 0;
color: #777;
}
/* =Elements style
---------------------- */
.load-wrapp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999999999;
text-align: center;
place-items: center;
display: grid;
background-color: #d8d8d8;
}
.load-wrapp p {
padding: 0 0 20px;
font-size: 1.2rem;
color: #555;
}
.load-3 .line {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 15px;
background-color: #f00;
}
.load-3 .line:nth-last-child(1) {
animation: loadingC 0.6s 0.1s linear infinite;
}
.load-3 .line:nth-last-child(2) {
animation: loadingC 0.6s 0.2s linear infinite;
}
.load-3 .line:nth-last-child(3) {
animation: loadingC 0.6s 0.3s linear infinite;
}
@keyframes loadingC {
0 {
transform: translate(0, 0);
}
50% {
transform: translate(0, 15px);
}
100% {
transform: translate(0, 0);
}
}
Menambahkan Event Javascipt
Bagian ketiga yang terpenting adalah, menambahkan event ‘load’. Tapi sebelum menambahkan kode javascipt dibawah ini, pastikan kamu telah membuat file script.js atau memasukan code nya di dalam tag <script>..code..</script> sebelum penutup </body>. Berikut scriptnya bisa langsung kamu copy saja:
myPreloader = document.querySelector('.load-wrapp')
window.addEventListener('load' , () => {
myPreloader.remove();
});Kuntungan Membuat Efek Loading Website
Seperti yang sudah saya katakan sebelumnya, dengan membuat efek loading website mendapat beberapa manfaat sebagai berikut:
Lebih Interaktif
Seperti yang sudah saya katakan sebelumnya lagi, dengan membuat efek loading wesite menjadi lebih interaktif. Pengunjung merasa tidak bosen menunggu konten memuat. Berbeda jika tanpa menggunakan efek loading, pengunjung akan menunggu konten memuat satu perasatu seperti pada gambar di atas.
Menaikan Daya Tarik Pengunjung
Berkaitan dengan yang pertama. Dengan membuat efek loading website ketika dibuka akan lebih menarik. Sehingga pengujung menegtahui bahwa website merespon, dengan begitu pengunjung tidak akan keluar dari halaman tersebut. Jika efek loadingnya sangat bagus, akan memberikan kesan positif kepada pengunjung.
Kesimpulan Membuat Efek Loading Website
Kesimpulan yang bisa anda ambil setelah mengikuti langkah-langkah tentang membuat efek loading website ini adalah membuat preloader sangat gampang dan website akan mendapat beberapa keuntungan. Website kamu akan mendapat banyak keuntungan, seperti website lebih interaktif dan dapat menaikan daya tarik pengunjung.
Akhir kata, demikian tutorial membuat efek loading website. Semoga menjadi pembelajaran bagi temen-temen semua. Jika sedang mencari cara untuk ubah judul web ketika pindah tab di js klik di sini. Untuk tutorial lainnya tentang coding bisa kamu dapatkan di arsip kategori coding.