Cara Membuat Preloader Menggunakan Javascript

Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Pada tutorial kali ini saya akan mencoba membagi Cara Membuat Preloader Menggunakan Javascript.

Fungsi dari preloader adalah untuk memeberi informasi kepada user bahwa suatu halaman website atau suatu file pada website sedang di load, karena di takutkan user mengira halaman atau file yang di akses itu kosong maka kita buatlah preloader.

Sekarang saya akan mencoba memberikan tutorial Cara Membuat Preloader Menggunakan Javascript secara singkat berikut langkah-langkahnya:

– Pertama teman-teman buat HTML-nya dulu:

<!DOCTYPE html>
<html>
<head>
	<title>Preloader</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div id="overlay"><!--sebagai id yang akan kita ambil untuk javascriptnya-->
		<h1 style="color: white; text-align: center">Mohon Bersabar Ini Ujian</h1>
		<div class="putar"></div><!--animasi preloader-->
	</div>

<!-- file yang akan di tampilkan setelah preloader selesai -->
	<center>
		<iframe width="560" height="315" src="https://www.youtube.com/embed/uUEam-gTXTY" frameborder="0" allowfullscreen></iframe>
	</center>
	
</body>
</html>

Di sini saya menggunakan video sebagai file yang akan di loadnya. Jangan lupa save dengan nama index.html

– Kedua teman-teman ketikan kode CSS3 di bawah ini:

body{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.putar{
	width: 100px;
	height: 100px;

	border:4px solid #f3f3f3;
	border-top:5px solid #3498db;
	border-radius: 100%;

	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;

	animation: putar 2s infinite linear;
}

@keyframes putar{
	from{
		transform:
		rotate(0deg);
	}to{
		transform: rotate(360deg);
	}
}

#overlay{
	height: 100%;
	width: 100%;
	background: #010101;
	position: fixed;
	left: 0;
	top: 0;
}

lalu save dengan nama style.css

– Ketiga teman-teman buat file javascriptnya

var overlay = document.getElementById("overlay"); /* untuk mengambil elemen berdasarkan id yang ada id html */

window.addEventListener('load', function()
{
	overlay.style.display = 'none';
})

Save dengan nama putar.js, penjelasan tentang scriptnya sudah saya beri commenting pada script di atas. dan jangan lupa beri link script di atas tag penutup </body> di pada html seperti kode di bawah ini:

<script type="text/javascript" src="putar.js"></script>
</body>

– Hasilnya akan menjadi seperti ini:

setelah selesai meload filenya maka akan tampil video yang kita simpan tadi:

Bagaimana teman-teman cukup mudahkan Cara Membuat Preloader Menggunakan Javascript.

Sekian tutorial saya untuk kali ini. Sehat selalu ya teman-teman, selamat mencoba.

Cara Membuat Preloader Menggunakan Javascript

Kategori