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>

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Menambahkan Konfirmasi Email di Google Form

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Menghapus Baris di Google Sheets yang Memiliki Sel Kosong dengan Apps Script

Template Gratis App Android Sederhana dengan Admob, Firebase dan In-app Purchase

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Menyikapi Ucapan AI Pejabat

Menyembunyikan Failed Load Images di Blogger

Apps Script untuk Mengirimkan Notifikasi Approval

Apps Script untuk Copy File ke Folder berdasarkan ID yang Terdaftar di Google Sheets