نمادها

شما اینجا هستید

آموزش تصویری ساخت نوار بارگزاری

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

آموزش تصویری ساخت نوار بارگزاری به شما کمک می کند که یک 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>

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

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

اگر این مطلب آموزنده بود به ما امتیاز دهید

میانگین امتیاز / 5. تعداد آرا:

اولین کسی باشید که رای میدهید


این مجموعه فایل rar است که برای باز کردن آن نیاز به نرم افزار Winrar می باشد

آموزش تصویری ساخت نوار بارگزاری و سورس کد ها : نوع فایل:rar/video/code حجم فایل:20.42 مگابایت

بعد از اکسترکت (extract) کردن فایل ها آن را با یک پلیر تصویری ببینید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.