نوار پیشرفت واکنشگرا

چاپ

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

20%

 


کلاس های نوار پیشرفتW3.CSS

W3.CSS کلاس های نوار پیشرفت زیر را فراهم میکند:

کلاس تعریف
w3-progress-container Container برای یک نوار پیشرفت
w3-progressbar یک  منطقه پر از نوار پیشرفت

نوار پیشرفتهای پایه

 کلاس  w3-progress-container یکcontainer برای نوار پیشرفت ،با رنگ پیش فرض خاکستری روشن تعریف میکند. کلاس w3-progressbar یک منطقه پراز نوار پیشرفت تعریف میکند. به صورت پیش فرض ،خاکستری است.

عرض نوار پیشرفت با خصوصیت width تعیین میشود(از 0 تا 100%)

مثال

<div class="w3-progress-container">
  <div class="w3-progressbar" style="width:35%"></div>
</div>
خودتان امتحان کنيد »

عرض نوار پیشرفت

عرض نوار پیشرفت را با خصوصیت (width) در CSS تغییردهید(از 0 تا 100%) 

مثال

<div class="w3-progress-container">
  <div class="w3-progressbar" style="width:50%"></div>
</div>
خودتان امتحان کنيد »

رنگهای نوار پیشرفت

از کلاسهای  w3-color برای تغییر رنگ نوار پیشرفت استفاده می شود:

مثال

<div class="w3-progress-container w3-pale-blue">
  <div class="w3-progressbar w3-blue" style="width:75%"></div>
</div>
خودتان امتحان کنيد »

اندازه نوار پیشرفت

از کلاس های w3-size را برای تغییر اندازه نوارپیشرفت استفاده می شوند:

مثال

<div class="w3-progress-container w3-small">
  <div class="w3-progressbar" style="width:50%"></div>
</div>
خودتان امتحان کنيد »

نوار پیشرفتی گردشده

 از کلاسهای  w3-round برای گرد کردن نوار پیشرفت استفاده می شود:

مثال

<div class="w3-progress-container w3-round">
  <div class="w3-progressbar w3-round" style="width:25%"></div>
</div>
خودتان امتحان کنيد »

برچسب های نوار پیشرفت

یک عنصر جدید درون عنصر  w3-progressbar بیافزایید ،تا یک برچسب به نوار پیشرفت اضافه شود:

نکته : کلاس  w3-center برای وسط چین کردن برچسب استفاده میشود. اگر استفاده نشود،برچسب چپ چین خواهد بود:

25%

 

50%

 

75%
 

مثال

<div class="w3-progress-container">
  <div id="myBar" class="w3-progressbar w3-green" style="width:25%">
    <div class="w3-center w3-text-white">25%</div>
  </div>
</div>
خودتان امتحان کنيد »

نوار پیشرفت پویا

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

مثال

<div class="w3-progress-container">
  <div id="myBar" class="w3-progressbar w3-green" style="width:1%"></div>
</div>

<button class="w3-btn" onclick="move()">Click Me</button>

<script>
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 + '%';
        }
    }
}
</script>
خودتان امتحان کنيد »

نوار پیشرفت پویا با برچسب

برچسب های وسط چین:

مثال

20%

خودتان امتحان کنيد »

برچسب چپ چین :

مثال

20%

خودتان امتحان کنيد »

برچسب بیرونی نوار پیشرفت:

مثال

 

20%

خودتان امتحان کنيد »

 یک مثال دیگر(پیشرفته):

مثال

 

0 تا 10 تصویر بیافزایید

خودتان امتحان کنيد »