سلام برنامه | HiProgram

سلام برنامه در خدمت شماست با آموزش تصویری ساخت نوار بارگزاری.

آموزش تصویری ساخت نوار بارگزاری به شما کمک می کند که یک Progress bar طراحی کنید.

نوار های بارگزاری را در زمان دانلود یا آپلود فایل ها می توانید ببینید.

با سلام برنامه همراه باشید در آموزش ساخت نوار بارگزاری

این نوار با کد های html و css و javascript ساخته  میشود و ساخت آن تنها چند خط کد کوتاه زمان می برد

از این نوار ها برای نمایش میزان پیشبرد اهداف و کار ها نیز در سایت ها استفاده می شود

برای ساخت نوار بارگزاری ابتدا کد های زیر را به قسمت body خود اضافه کنید.

<div>
<div class="w3-light">
  <div id="myBar" class="w3" style="width:0%">0%</div>
</div>
<br>
<button onclick="move()">بارگزاری</button> 
</div>

سپس کد های زیر را به css خود اضافه کنید

.w3{
background:#ccc;
}
.w3-light{
border:1px solid #000;
}

و در اقدام آخر کد های جاوا اسکریپت زیر را بعد از کد های html خود نوار بارگزاری قرار دهید

<script>
function move() {
  var elem = document.getElementById("myBar");   
  var width = 0;
  var id = setInterval(frame, 30);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}
</script>

کار طراحی نوار بارگزاری تمام است.

برای مشاهده جزئیات بیشتر آموزش می توانید فیلم فارسی آموزش را به همراه سورس کدها از باکس دانلود موجود در زیر همین تصویر دانلود نمایید