Selain membuat cara mengakses data secara real-time dari database Firebase, penulis juga membuat progress bar sederhana agar setidaknya ada informasi kepada pengguna apa yang sedang terjadi ketika peramban sedang memuat laman web kita ini.
 |
| Tampilan Progress Bar Sederhana |
Penulis mencoba mengorek informasi dari forum-forum bagaimana cara membuat progress bar yang dinamis, tenyata untuk pembuatan yang dinamis tidak dapat menggunakan JavaScript, harus menggunakan Ajax ataupun bahasa pemrograman web lainnya. Adapun penulis memilih menggunakan JavaScript dalam pembuatan progress bar sederhana ini dikarenakan lebih mudah dan "ringan" karena dijalankan oleh "client side". Tanpa panjang lebar lagi, mari kita buat progress bar sederhana ini..
Pertama, sisipkan kode CSS (Cascading Style Sheet) ini setelah tag <title> didalam <head>, berikut ini potongan kodenya untuk desain dan warna progress bar:
<style>
.myProgress {
position: absolute;
max-width: 800px;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
visibility: visible;
margin: auto;
border: 2px solid black;
background-color: #555;
}
#myBar {
width: 100%;
height: 30px;
background-color: #04AA6D;
text-align: center;
line-height: 30px;
color: white;
}
</style>
.myProgress {
position: absolute;
max-width: 800px;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
visibility: visible;
margin: auto;
border: 2px solid black;
background-color: #555;
}
#myBar {
width: 100%;
height: 30px;
background-color: #04AA6D;
text-align: center;
line-height: 30px;
color: white;
}
</style>
Kedua, sisipkan kode JavaScript setelah tag <body>, berikut ini potongan kodenya untuk menampilkan progress bar:
<script>
/* Start create layer for progress dialog */
document.write("<div id=\"myProgress\" class=\"myProgress\">");
document.write("<div id=\"myBar\">5%</div>");
document.write("</div>");
/* End of create layer for progress dialog */
/* Start create layer for progress dialog */
document.write("<div id=\"myProgress\" class=\"myProgress\">");
document.write("<div id=\"myBar\">5%</div>");
document.write("</div>");
/* End of create layer for progress dialog */
var elem = document.getElementById("myBar");
/* Fungsi untuk memperbarui prosentase progress bar */
function updateBar(percent) {
if (percent != 0) {
if (percent >= 100) {
elem.style.width = percent + "%";
elem.innerHTML = "Membaca data sensor di Firebase... " + percent + "%";
setTimeout(function(){document.getElementById("myProgress").style.display = "none";},500);
} else {
elem.style.width = percent + "%";
elem.innerHTML = "Membaca data sensor di Firebase... " + percent + "%";
function updateBar(percent) {
if (percent != 0) {
if (percent >= 100) {
elem.style.width = percent + "%";
elem.innerHTML = "Membaca data sensor di Firebase... " + percent + "%";
setTimeout(function(){document.getElementById("myProgress").style.display = "none";},500);
} else {
elem.style.width = percent + "%";
elem.innerHTML = "Membaca data sensor di Firebase... " + percent + "%";
}
}
}
</script>
}
}
</script>
Ketiga, agar progress bar ini dapat berjalan dengan baik, maka anda harus memperbarui progress bar ini secara manual ketika terjadi proses ataupun aktifitas lainnya dengan cara memanggil fungsi updateBar() diisi dengan angka maksimal 100 (contoh: updateBar(10), maka akan ditampilkan progress bar 10%). Setelah mencapai nilai maksimal 100, maka tampilan progress bar secara otomatis akan hilang.
Cukup mudah bukan membuat progress bar sederhana? Semoga tulisan singkat ini bermanfaat bagi anda sekalian.. Silahkan mencoba dan semoga berhasil..
Tidak ada komentar:
Posting Komentar