Progress Loader Tengah Vertical dan Horizontal dengan CSS

Oleh -

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

Posting Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Oleh -
Gambar
Tutorial pembuatan sertifikat menggunakan Google Docs, Sheets dan Apps Script teleh penulias buat dalam video di bawah ini: Sedangkan berikut ini adalah kode Apps Script yang penulis gunakan di dalam tutorial di atas: function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Cetak Sertifikat"); menu.addItem("Cetak Sertifikat", "generateMode"); menu.addToUi(); } function generateMode() { var idtemplate="1qseLMkdYIzmx0rhkKELF0xxlsD13CS1eCk0MlcTKt_g"; var idtarget="1ZLNksdiilEc0mQ88WOfAuU8_JcMVcO6ewXuJes-UU9I"; var ss = SpreadsheetApp.openById("1j1TArXYzRlVGvB9q7ly7NdyF-nsJcCH6RT3rOQik0yQ"); var so=ss.getSheetByName("Source"); var data=so.getRange("A1:C").getValues().map(function(row){return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); const docTemplate=DocumentApp.openById(idtemplate); var docTarget=DocumentApp.open...
Baca selengkapnya

Anak Usia Sekolah Hendaknya tidak hanya Bermain Game Online

Oleh -
Dalam bulan tulisan ini ditulis, penulis terganggu dengan kegaduhan anak-anak muda yang bermain game online di dekat rumah mertua penulis. Pasalnya, mereka masih anak usia sekolah menengah. Pandemi Corona yang semakin diperpanjang, membuat mereka tidak masuk sekolah, yang tidak lain akibat dari pendidikan yang dilakukan secara online. Mirisnya, mereka tidak menyibukkan diri dengan belajar, melainkan bermain game online, dan hal itu mereka lakukan mulai sekitar jam 10 malam, sampai subuh. Penulis tidak habis pikir, bagaimana mereka menanam bom waktu, yang bisa menghancurkan masa depan mereka sendiri suatu hari kelak. Pekerjaan macam apa yang mereka inginkan? Apakah sekolah sampai SMA/STM, tongkrongan motor sport gede, lulus, berijazah, rambut disemir, lalu mereka dapat menaklukkan dunia? Apakah mereka tidak tahu kalau kerasnya dunia justru berawal ketika mereka bekerja dan lepas dari orang tua? Dan apakah mereka akan menjadi sampah, benalu atau panutan masyarakat? Sungguh penulis tidak ...
Baca selengkapnya

Seberapa Hebatkah Orang Dalam

Oleh -
Gambar
Ilustrasi Orang Dalam (Sumber gambar: Pixabay/mhouge) Dalam urusan pemberkasan sertifikat tanah atau semacamnya, seringkali kita menemui orang yang berani bilang "Dengan bantuan orang dalam, maka segala urusan apapun akan menjadi mudah dan murah". Biasanya, orang yang berani bilang seperti itu adalah mereka yang bekerja sebagai makelar atau calo. Kemudian bagi penulis sendiri, semenjak merasa ditipu oleh seorang 'makelar' pengurusan sertifikat tanah sebelum tulisan ini ditulis, penulis menjadi sulit mempercayai kata-kata orang yang menyebutkan orang dalam tersebut. Sehingga, jika terdapat irang yang bilang semacan itu, penulis hanya balik menantang "Coba jaman sekarang, dia berani kagak!". Alasannya, pertama, peraturan semakin ketat, seperti yang penulis posting sebelumnya, notaris pun saat tulisan ini ditulis, tidak berani untuk melakukan jalan pintas. Misalnya untuk masalah perwalian pembelian tanah waris, 3 dari 4 notaris yang penulis temu...
Baca selengkapnya

Ngobrol Penghabisan Dana Akhir Tahun

Oleh -
Gambar
Ilustrasi pelatihan di hotel (Sumber gambar:Pixabay/Megha01) Suatu hari libur, di bulan Desember, penulis bersilaturahmi ke salah satu kerabat yang bekerja sebagai perangkat desa. Disana, kerabat penulis ternyata sedang dikunjungi oleh rekan kerjanya dari desa lain. Penulis pun berkenalan, tanpa perlu saling menyebutkan nama, dan penulis pun duduk serta mendengarkan perbincangan tentang kegiatan yang telah mereka lakukan, beberapa hari sebelumnya. Tampaknya, mereka begitu bangga karena dapat mengikuti kegiatan tersebut. Hal itu terlihat dari cara mereka menceritakan, begitu senangnya dapat berkenalan dengan pejabat-pejabat dari desa lain, dan dapat mengikuti acara, makan serta menginap gratis di salah satu hotel bintang lima di kota kami. Sampai-sampai. "Bagaimana tidak senang, sudah diundang, menginap gratis, dan diberi uang saku pula!" seru salah satu dari mereka ke penulis. Dalam perbincangan itu pula, rupanya acara yang mereka datangi adalah...
Baca selengkapnya

Perguruan Tinggi, Investasi atau Formalitas Semata?

Oleh -
Gambar
Ilustrasi pendidikan sarjana (Sumber gambar: Pixabay) Penulis sedikit merenung dan miris, tentang sebenarnya apa tujuan pendidikan di Indonesia. Banyak yang bergelar lebih dari S1, namun apakah hal tersebut hanya formalitas dan untuk mendapatkan gaji dengan nominal yang tinggi. Sampai tulisan ini ditulis, dikalangan masyarakat, asumsi tujuan utama sekolah sampai mendapat gelar sarjana, hanyalah untuk orientasi kerja. Yaitu untuk dapat bekerja dikantoran, dan dengan gaji di atas standar. Bahkan, bagi sarjana yang sudah bekerja sekalipun, banyak dari mereka yang berusaha untuk sekolah lagi. Agar mendapatkan kenaikan gaji, dari gelar sarjana barunya, yang tentu saja lebih tinggi. Pertanyaannya, bagaimana pengaruhnya terhadap perusahaan atau instansi yang diwajibkan menggaji karyawan sesuai gelar, dimana tingkat kemampuan karyawan ternyata tidak sebanding dengan tingkat gelarnya? Yang pasti "Collapse". Bayangkan jika pekerjaan yang harus ditanga...
Baca selengkapnya

Tip Memilih Notaris

Oleh -
Gambar
Ilustrasi sertifikat (Sumber gambar: Pixabay/DKrue) Tidak disangka penulis, saat tulisan ini ditulis, ternyata menjadi notaris PPAT (Petugas Pembuat Akta Tanah) merupakan pekerjaan yang rentan dengan penipuan. Berikut ini adalah tip, untuk menghindari penipuan yang mungkin dilakukan oleh oknum notaris baik sengaja maupun tidak sengaja. Tidak sengaja yang dimaksudkan di sini adalah oleh tingkat keilmuan atau pengalamannya. Adakalanya karena masih muda, si notaris belum tahu kebutuhan biaya yang tidak terduga, yang muncul ditengah-tengah pengurusan akte tanah. Atau karena sudah terlalu pengalaman, si notaris terlanjur mematok harga semurah mungkin, yang nyatanya dia tidak tahu ternyata ada langkah dan biaya tambahan yang harus dilewati untuk meminimalisir penipuan oleh pihak negara. Contoh kasusnya, penulis pernah meminta tolong untuk balik nama sertifikat tanah yang pemilik aslinya sudah meninggal. Dari hasil diskusi, sesuai pengalaman, si notaris memperki...
Baca selengkapnya

Kumpulan Source Code Greenfoot

Oleh -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D ...
Baca selengkapnya

Hati-hati Calo Sertifikat Tanah

Oleh -
Gambar
Ilustrasi permohonan (Sumber: Pixabay/jarmoluk) Mengurus sertifikat tanah, baik itu membuat baru atau balik nama, kalau bisa jangan sampai menggunakan pihak ketiga (seperti calo), tetapi langsung ke notaris saja. Hal ini karena, bagaimana pun juga pihak ketiga tersebut, akan pergi juga ke notaris pada akhirnya. Syukur-syukur, jika pemohon bisa datang langsung ke Kantor BPN. Sehingga alur kebutuhan dana saat proses, lebih jelas dibanding melewati pihak ketiga, yang umumnya berupa komisi. Contoh yang terjadi pada penulis. Awalnya, karena belum pernah sama sekali, penulis meminta tolong pihak ketiga, balik nama sertifikat, katakan pihak ketiga itu bernama Samin. Samin melihat ukuran tanah dan cara yang dia lakukan, dia mematok harga mulai 8 juta. Penulis percaya dengan Samin, dan memberikan uang jalan sebesar 3 juta sebagai DP dan uang jalan. Dan katanya, dia akan me-mark-up sedemikian rupa, sehingga harga jasa balik nama semurah-murahnya. Markup...
Baca selengkapnya

Review Pengguna yang Berperilaku Konsumtif

Oleh -
Gambar
Suatu pagi, penulis sebagai developer Aplikasi Long Division, Computational Lab mendapat review seperti gambar di bawah ini: Mungkin bagi sebagian banyak orang akan menganggap ini lucu, karena mengadu/review aplikasi hanya masalah bahasa, adalah lebih ke pribadi pengguna, bukan ke developer. Apalagi aplikasi yang direview bertema matematika, angka-angka merupakan bahasa sendiri dan tidak tergantung pada penjelasan bahasa tertentu, untuk tingkat dasarnya. Namun bagi penulis, yang juga menjadi pengajar, hal ini membuat saya sedih. Pasalnya, generasi didikan kita (sesuai ditunjukkan pada review di atas), diusia dini sudah menunjukkan identitasnya sebagai konsumen yang tulen. Entah, apa memang dia berasal dari keluarga yang kaya, atau memang pendidikan yang menyebabkan dia berpola pikir seperti itu. Artinya generasi didik kita lebih ingin memposisikan diri sebagai raja/ratu yang harus dilayani sebaik mungkin, dan jika tidak puas atau tidak sesuai keinginan mereka sedikit saja, maka sudah p...
Baca selengkapnya

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)

Oleh -
Sebagai database engineer, penulis sempat kaget ketika mendapati banyaknya data masuk, khususnya dari mahasiswa yang mengajukan nama instansi, yang secara berulang kali menulis PT tanpa menggunakan tanda titik, untuk pengajuan suratnya. Penulis yang terbiasa dengan pemahaman lama (EYD) bahwa 'PT' harus ditulis 'PT.' akhirnya mencoba memeriksa ulang. Setelah penulis check dan berdiskusi ke salah satu AI, ternyata memang terdapat pembaharuan dan penulisan tanpa titik adalah kaidah baku modern. Konsistensi ini krusial untuk integritas database.  Konflik Aturan Bahasa dan Kebutuhan Sistem Pertama banyak yang sudah terbiasa (termasuk penulis) menambahkan titik setelah singkatan seperti 'PT.' karena dahulu aturan Ejaan Yang Disempurnakan (EYD) mengamanatkan titik pada singkatan tertentu. Namun, untuk menjaga  integritas data  dan  standardisasi  dalam sistem informasi dan dokumen hukum, kita harus berpegangan pada kaidah penulisan nama entitas yang resmi. 1. Penulisan...
Baca selengkapnya