Progress Loader Tengah Vertical dan Horizontal dengan CSS

Seperti yang pernah penulis sebutkan dalam posting sebelumnya. Salah satu hal terpenting dalam membuat aplikasi, adalah menampilkan progress loader untuk suatu proses.

Sebab, jika tidak menampilkan kondisi tersebut, pengguna tidak akan tahu bahwa aplikasi sedang melakukan proses, yang kemungkinan besar dapat membuat pengguna lari meninggalkan aplikasi.

Apalagi jika aplikasi itu berupa website. Pengguna akan lebih memilih untuk pergi ke halaman lain, jika website buatan kita itu seperti crash atau kosong.

Berikut ini adalah kode satu halaman web, yang menunjukkan contoh progress loader menggunakan CSS sesuai gambar di atas:

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#loader,.boxloader{
	position:absolute;
	top: 50%;
	left: 50%;
	background-color:white;
	padding:20px;
	display:flex;
	flex-flow:column;
	align-items:center;
	border: 1px solid #eee;
    border-radius:8px;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.progressbar {
	position:initial;
	border: 5px solid #f3f3f3;
	border-radius: 50%;
	border-top: 5px solid #3498db;
	width: 20px;
	height: 20px;
	-webkit-animation: spin 0.5s linear infinite;
	animation: spin 0.5s linear infinite;
}
</style>
</head>
<body>
<div class='boxloader'><div class='progressbar'></div>Sending data, please wait..</div></div>
</body>
</html>