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

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

Oleh -
Gambar
Dimisalkan terdapat data yang tersimpan di Google Sheets dan tidak terdapat pembeda antara satu dengan yang lain. Hal ini akan mengakibatkan kesulitan jika akan dilakukan penghapusan salah satu atau bebarapa data tertentu melalui web apps. Oleh karena itu, kode Apps Script di bawah ini, adalah kode untuk menambahkan "unique ID key" pada tiap data, terutama untuk mempermudah proses penghapusan data, yang biasanya dilakukan melalui web apps oleh pengguna yang berbeda. Kode function makeRandomChar(length) { var result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@'; let counter = 0; while (counter < length) { result += characters.charAt(Math.floor(Math.random() * characters.length)); counter += 1; } return result; } function addRandomKey() { var target = SpreadsheetApp.openById("--ID Google Sheets file--"); var ss=target.getSheetByName("Data"); var d...
Baca selengkapnya

Menampilkan Struktur Tabel MySQL dengan JTree

Oleh -
Gambar
Tertarik menampilkan struktur table database MySQL dalam bentuk tree, penulis melakukan percobaan memanggil database menggunakan JTree. Penggunaan JTree memang karena aplikasi yang sedang penulis bangun adalah berbasis web app, Android dan dengan back-end berupa dekstop menggunakan Java. Seperti yang telah disebutkan dalam posting-posting sebelumnya, penggunaan Java tidak lain karena penulis ingin tidak terlalu ribet masalah lisensi dikemudian hari. Diharapkan dengan pembuatan dengan platform yang mayoritas 'free', distribusi aplikasi nantinya dapat dilakukan lebih mudah dan bebas. Desain Skenario utama pembuatan back-end aplikasi penulis, adalah bagaimanapun juga database yang digunakan harus satu, dan dapat diakses baik dari sisi web, Android dan juga software. Oleh karena itu penulis menggunakan database MySQL (My-Structured Query Language), dengan menggunakan komunikasi data berupa JSON (JavaScript Object Notation), yang di akses dan di encode men...
Baca selengkapnya

Algorithma Bilangan Prima dengan C++

Oleh -
Gambar
Screenshot kompilasi menggunakan codingground (diambil oleh penulis) Melihar traffic yang cukup banyak pada posting penulis terkait algorithma bilangan dengan Javascript dan Pascal , dibawah ini penulis mencoba untuk menuliskannya dalam kode C++. Berikut adalah kode implementasi bilangan prima, dengan menggunakan bahasa pemrograman C++. #include <iostream> using namespace std; bool isPrime( int a) { bool isprime= true ; if (a<0)isprime= false ; for ( int i=2;i<a;i++){ if (a%i==0){ isprime= false ; } } return isprime; } int main() { int angka=100;//batas angka yang mau di cek for ( int i=2;i<=angka;i++){ if (isPrime(i)) { if (i>2)cout<< "," ; cout << i; } } return 0; } Penulis menggunakan kompiler codingground C++ online, yang ada di  tutorialspoint.com .
Baca selengkapnya

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

Oleh -
Gambar
Pastinya, input data yang dilakukan oleh pengguna, terdapat data yang kosong pada salah satu sel-nya. Hal ini biasanya karena salah input, atau memang sengaja di-input-kan oleh pengguna. Untuk mengurangi proses pengolahan, dapat dilakukan penghapusan data tersebut, dengan Apps Script yang dapat di download dengan kode seperti di bawah ini: Kode function deleteKosong() { var target = SpreadsheetApp.openById("--id Google Sheets file--"); var ss=target.getSheetByName("Data"); var data=ss.getRange("A2:G").getValues().map(function(row,index){return (row[0]!="" && row[3]=="")?index:null;}).filter(function(cellData){return cellData != null;}); for(var i=data.length-1;i>=0;i--){ ss.deleteRow(2+data[i]); } } Demo
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

Keuntungan menjadi Pengguna Berbayar Aplikasi Android

Oleh -
Gambar
Salah satu karakteristik pengguna aplikasi dan game Computational Lab adalah mereka lebih suka yang gratis, meskipun melihat iklan dan sedikit sekali yang berkeinginan menjadi pengguna berbayar (paid user), meski harga beli yang sebenarnya murah. Kebanyakan di aplikasi dan game Computational Lab, penulis distribusikan secara gratis, tetapi menampilkan iklan. Dan jika ada pengguna yang ingin tidak melihat iklan, dapat menekan menu Buy untuk membelinya. Harganya bermacam-macam, ada yang cuma 3000, 5000, dan di atas 50 ribu rupiah untuk aplikasi yang penulis anggap unik. Memang, jika dilihat dari segi nominal, pendapatan dari iklan justru lebih besar dibanding dari pengguna yang memilih menjadi paid user. Padahal jika dipikir ulang, menurut penulis bisa jadi pengguna gratis justru lebih merugi. Merugi yang dimaksud disini adalah adanya kuota internet yang digunakan untuk mendownload iklan secara tidak sadar. Berdasarkan pengamatan penulis, cara kerja iklan...
Baca selengkapnya

Menyembunyikan Failed Load Images di Blogger

Oleh -
Gambar
Salah satu cara untuk menyembunyikan gambar yang tidak dapat di load pada suatu halaman Blogger adalah menggunakan fungsi remove element Javascript. Namun cara ini tidak penulis jamin dapat berjalan disemua browser. Setidaknya, dapat mempercantik tampilan posting yang hanya menggunakan gambar thumbnail dari Youtube. Dibawah ini adalah kode Javascript dan bagaimana menambahkan di Blogger. Kode <script> var imgs=document.getElementsByTagName("img"); for(var i=0,j=imgs.length;i<j;i++){ imgs[i].onerror = function(e){ this.parentNode.removeChild(this); } } </script> Demo
Baca selengkapnya

Pengalaman Banding Suspend Aplikasi

Oleh -
Gambar
Hari Kamis, 13 Februari 2020, penulis mendapat email suspend, dua aplikasi sekaligus di Play Store. Yaitu Algebra Equation Calculator dan LCM and HCF . Salah satu email suspend-nya berisi kurang lebih sebagaimana gambar di atas. Penulis tidak mengerti, kenapa kedua aplikasi tersebut melanggar itu secara berulang-ulang (repetitive). Apalagi dikatakan tidak memiliki value apapun. Tepatnya, penulis tidak tahu pelanggaran apa sebenarnya. Karena sangat sulit sekali memahami pesan peringatan dari Google. Disebabkan hal ini sudah terjadi berulang kali dan penulis yakin bahwa suspend itu hanya kesalahan, maka penulis berani untuk melakukan banding, dengan isian komentar kurang lebih sebagai berikut: Hello Play Support Team, I believe that all of the app mentioned above are not violating any policies. I had already very carefully reviewed by my self it during and after the developing process, as well as the ads placement. Please be noted that each app of my app in Play Stor...
Baca selengkapnya

Kebodohan Karyawan Menyalahkan Sistem

Oleh -
Untuk kesekian kalinya, penulis melihat, terdapat karyawan yang dengan omong besarnya, menyalahkan sistem yang ada di instansi di mana penulis bekerja. Mulai dari struktur database, kebijakan atasan, dan lain sebagainya. Salah. Semua salah, katanya. Padahal, menurut penulis, justru dialah yang munafik. Kalau memang salah, kenapa juga masih mau di gaji dari instansi ini. Kenapa tidak berani mengundurkan diri, jika memang merasa di dzolimi. Kenapa masih mau mengerjakan pekerjaan, yang dia anggap dari pola pikir 'orang miskin'. Bagi penulis, dengan pola pikir seperti itu, dialah yang justru menambah jumlah orang bodoh di instansi ini, bukan memberikan solusi. Miris. Harusnya dia menyadari, jika instansi menggaji dirinya, sebenarnya adalah untuk memperbaiki hal-hal yang dia anggap salah tersebut. So, what will you do, if that actually your job where the reason you have been paid here? Oleh karena itu, alangkah baiknya ketika perekrutan karyawan baru, setidaknya lebih selektif lagi ...
Baca selengkapnya