How TO - Bilah Kemajuan JavaScript
Pelajari cara membuat bilah kemajuan menggunakan JavaScript.
Membuat Bilah Kemajuan
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: green;
}
Langkah 3) Tambahkan JavaScript:
Buat Bilah Kemajuan 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 Anda ingin menambahkan label untuk menunjukkan seberapa jauh pengguna dalam proses, tambahkan elemen baru di dalam (atau di luar) bilah kemajuan:
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: #04AA6D;
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color:
white;
}
Langkah 3) Tambahkan JavaScript:
Jika Anda ingin memperbarui teks di dalam label secara dinamis ke nilai yang sama dengan lebar bilah kemajuan, 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 + "%";
}
}
}
}