Di bawah ini kita akan mempelajari cara membuat Progress Bar menggunakan JavaScript. Progress bar biasanya digunakan untuk membuat gambaran suatu proses dari suatu kinerja. Seperti ini :
<!DOCTYPE html> <html> <style> #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 30px; background-color: #00BFFF; } </style> <body> <h1>Contoh JavaScript Progress Bar</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">Klik di sini</button> <script> var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); i = 0; } else { width++; elem.style.width = width + "%"; } } } } </script> </body> </html>
Membuat Progress Bar
Langkah 1) Tambahkan HTML:
Contoh
<div id="myProgress"> <div id="myBar"></div> </div>
Langkah 2) Tambahkan CSS:
Contoh
#myProgress {
width: 100%;
background-color: grey;
}
#myBar {
width: 1%;
height: 30px;
background-color: #00BFFF;
}Langkah 3) Tambahkan JavaScript:
Buat Progress Bar Dinamis (animasi) Menggunakan JavaScript:
Contoh
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}Tambahkan Label
Jika ingin menambahkan label untuk menunjukkan seberapa jauh pengguna dalam proses, tambahkan elemen baru di dalam (atau di luar) progress bar:
<!DOCTYPE html>
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 10%;
height: 30px;
background-color: #00BFFF;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>Contoh JavaScript Progress Bar Dengan Label</h1>
<div id="myProgress">
<div id="myBar">10%</div>
</div>
<br>
<button onclick="move()">Klik</button>
<script>
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
</script>
</body>
</html>
Langkah 1) Tambahkan HTML:
Contoh
<div id="myProgress"> <div id="myBar">10%</div> </div>
Langkah 2) Tambahkan CSS:
Contoh
#myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center; /* Untuk memusatkannya secara horizontal (jika mengingkannya) */
line-height: 30px; /* Untuk memusatkannya secara vertikal */
color: white;
}
Langkah 3) Tambahkan JavaScript:
Jika ingin memperbarui teks di dalam label secara dinamis ke nilai yang sama dengan lebar progress bar, tambahkan yang berikut ini:
Contoh
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}