Apa itu Progress Bar ?
Progress Bar adalah elemen kontrol grafis yang digunakan untuk memvisualisasikan perkembangan operasi komputer yang diperluas, seperti unduhan, transfer file, atau instalasi. Terkadang, grafik disertai dengan representasi tekstual dari kemajuan dalam format persen. Konsep ini juga dapat dianggap memasukkan "bar pemutaran" di pemutar media yang melacak lokasi saat ini dalam durasi file media.
Langkah pertama membuat html :
<div id="myProgress">
<div id="myBar"></div>
<button onclick="move()">Click Me</button>
</div>
Langkah kedua tambahan css :
#myProgress {
width: 100%;
background-color: grey;}
#myBar {
width: 1%;
height: 30px;
background-color: green;}
Langkah ketiga tambahkan javascript :
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
Dan jadinya akan seperti ini klik disini.
Sekian tutorial dari saya dan terimakasih selamat mencoba ^_^
Sumber : w3schools
Advertisement
