Cara Membuat Progress Bar Upload Photo di W3.CSS
Gunakan syukur ketika kamu dicintai, dan gunakan sabar ketika kamu dibenci. Jangan ada sesal, jangan ada sebal. Kali ini saya akan membahas mengenai bagaimana Cara Membangun Progress Bar Upload Photo di W3.CSS.
Progress Bar yang akan kita bikin ini hanyalah tampilan ya teman-teman, tak dengan manfaat Upload Photo nya teman-teman hahaha. Apa masih di antara kalian yang belum paham apa itu Progress Bar? Progress Bar yaitu kolom persen yang berjalan bagi memberitahu telah sukses atau belum manfaat yang kita mau.
Oke seketika saja kita praktekkan ya teman-teman. Berikut Cara Membangun Progress Bar Upload Photo di W3.CSS.
Seperti lazimnya, siapkan file index.html nya terlebih dahulu.
Kemudian, isi di bagian <head> link bagi menghubungkan HTML kita dengan library dari W3.CSS nya.
<link rel=stylesheet href=http://www.w3schools.com/lib/w3.css>
Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah,
<body class=w3-container>
<h2>Dynamic Progress Bar with Labels</h2>
<p>Label outside of the progress bar:</p>
<div class=w3-progress-container>
<div id=myBar class=w3-progressbar w3-green style=width:0%>
</div>
</div>
<p id=myP>Added <span id=demo>0</span> of 10 photos</p>
<button class=w3-btn w3-dark-grey onclick=move();this.disabled='true'>Upload Photos</button>
<script>
function move() {
var elem = document.getElementById(myBar);
var width = 0;
var id = setInterval(frame, 50);
function frame() {
if (width >= 100) {
clearInterval(id);
document.getElementById(myP).className = w3-text-green w3-animate-opacity;
document.getElementById(myP).innerHTML = Successfully uploaded 10 photos!;
} else {
width++;
elem.style.width = width + '%';
var num = width * 1 / 10;
num = num.toFixed(0)
document.getElementById(demo).innerHTML = num;
}
}
}
</script>
</body>
Bagaimana teman-teman? lumayan gampang bukan?
Demikian bagi panduan kali ini mengenai bagaimana Cara Membangun Progress Bar Upload Photo di W3.CSS.
Semoga bermanfaat, terima kasih
Sumber https://kursuswebsite.org
