Cara Membuat Loading Screen dengan HTML

Maaf, sebagai AI kami tidak dapat membuat gambar atau desain. Namun, kami dapat memberikan petunjuk untuk membuat loading screen dari HTML. Berikut adalah langkah-langkahnya:

Buat file HTML baru dan beri nama sesuai keinginan Anda.
Buat struktur dasar HTML dengan menambahkan tag <html>, <head>, dan <body>.
Di dalam tag <head>, buat tag <style> untuk menambahkan CSS.
Buat CSS untuk loading screen. Anda dapat menggunakan animasi CSS atau gambar GIF untuk menciptakan efek loading.
Tambahkan elemen HTML seperti <div> untuk menampilkan loading screen.
Gunakan JavaScript untuk menampilkan dan menyembunyikan elemen loading screen pada saat halaman dimuat.

Berikut adalah contoh kode HTML, CSS, dan JavaScript untuk membuat loading screen:

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Halaman Loading</title>
	<style>
		.loading {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
		}

		.loading-text {
			font-size: 24px;
			font-weight: bold;
			color: #000;
			margin-left: 10px;
		}

		.loading-img {
			width: 50px;
			height: 50px;
			background-image: url('https://thumbs.gfycat.com/EnormousGraciousAfricanbushviper-size_restricted.gif');
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			animation: rotation 1s infinite linear;
		}

		@keyframes rotation {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(359deg);
			}
		}
	</style>
</head>
<body>
	<div class='loading'>
		<div class='loading-img'></div>
		<div class='loading-text'>Loading...</div>
	</div>
	
	<!-- Konten halaman di sini -->
	
	<script>
		window.onload = function() {
			document.querySelector('.loading').style.display = 'none';
		}
	</script>
</body>
</html>

CSS di atas membuat tampilan loading screen yang berisi gambar GIF dan teks 'Loading...'. Animasi rotasi diterapkan pada gambar untuk memberikan efek loading yang dinamis. JavaScript di bawah ini akan menyembunyikan elemen loading screen pada saat halaman dimuat:

<script>
	window.onload = function() {
		document.querySelector('.loading').style.display = 'none';
	}
</script>