JavaScript Progress Bar Yapımı
İlerleme çubuğu yani progress bar çoğu zaman seviye vb işlemlerde projemizde entegre edebilceğimiz veye bir ilerlemenin durumunu gösterebilceğimiz bir yapıdır. Şimdi bu yazımızda basit bir progress bar yapalım.
Html Kodlarımız
<h1>Progress Bar Yapımı - Webinyo.COM</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">10%</div>
</div>
</div>CSS Kodlarımız
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
Js Kodlarımız
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}Cs kodlarımızı düzenleyerek kendi renkli progress barınızı özelleştirebilirsiniz.
