CSSInternetTutorial

Membuat Loader Animation Dengan CSS

Loader Animation Menggunakan CSS

Cara Membuat Loader Animation Dengan CSS – Pada kesempatan kali ini, saya ingin membuat tutorial cara membuat loader animation dengan CSS. Pernah gak sih ketika kalian mengunjungi sebuah situs web namun sebelum website tersebut terbuka dengan baik kalian melihat page loading? Itulah yang dinamakan dengan Loader Animation, tapi ini biasanya disebut dengan Preloader. Pada artikel ini, kita akan membuat nya hanya dengan CSS (pure CSS) dengan kode yang sangat simpel.


Cara Membuat Loader Animation Dengan CSS

Disini kita tidak menggunakan jQuery apapun, hanya mengandalkan HTML dan CSS saja. Silahkan simak tutorialnya dibawah ini:

Langkah 1: Membuat File HTML

Jadi, yang pasti kita lakukan adalah membuat struktur file HTMLnya terlebih dahulu, disini kita hanya perlu satu tag div yang kemudian nanti kita buat menjadi 5 div, contohnya seperti iniĀ <div class="loader">. Nah untuk kode script yang lebih lengkap kira-kira seperti dibawah ini, silahkan anda ketik jangan di copy-paste ya:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Loader Animation Iltekkomputer.com</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
	<div class="loader">
	</div>
</div>
</body>
</html>

Jika sudah selesai di ketik, simpan dengan nama index.html.

Langkah 2: Membuat Loader Animation

Nah saatnya kita bikin file CSS untuk membuat loader animation atau preloader nya, silahkan anda ketikkan kode CSS dibawah ini:

body{
	background-color: #0d161f;
}

#container{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

	.loader{
		width: calc(100% - 16px);
		height: calc(100% - 16px);
		border: 8px solid #162534;
		border-top: 8px solid #09f;
		border-radius: 50%;
		animation: rotasi 5s linear infinite;
	}

	@keyframes rotasi{
		100% { transform: rotate(360deg); }
	}

PENJELASAN KODE DIATAS

Pada kode CSS diatas, terdapat id #container yang digunakan sebagai wadah atau pembungkus dari isi halaman kita, jadi kita atur width dan height nya sebesar 200px, kemudian posisi kita ubah menjadi absolute supaya bisa keluar dari parentnya dan kita ubah supaya posisi berada di tengah dengan bantuan top dan left (fitur ini bisa digunakan jika kita membuat position: absolute;) dan juga fitur dari CSS 3 yaitu transform: translate(-50%, -50%); untuk mengubah posisi secara horizontal dan vertikal. Sedangkan overflow: hidden; berfungsi untuk tidak memisahkan element yang kita punya ketika tag div di buat menjadi 5. Berikut ini adalah perbedaannya.

overflow di hapus
overflow tidak di hapus
Terlihat perbedaannya, kan? Jika tidak menggunakan overflow, maka element akan dipisahkan atau keluar dari jalurnya, namun jika ada overflow, berarti element kita tidak dipisah dan akan tetap berada didalam elementnya.

Kemudian kita akan tambahkan div nya menjadi 5 seperti script dibawah ini:

<div class="loader">
		<div class="loader">
			<div class="loader">
				<div class="loader">
					<div class="loader">
					</div>
				</div>
			</div>
		</div>
	</div>

Nah jadi seperti itu lah cara membuat loader animation atau preloader dengan menggunakan CSS, cukup simpel kan?

Tags

Brian Harris

Seseorang yang tertarik dengan Dunia IT terutama di bidang Web Programming dan ingin menjadi Full-stack Developer.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close