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

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

20%

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

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

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

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

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

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

مثال

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

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

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

مثال

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

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

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

مثال

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

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

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

مثال

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

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

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

مثال

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

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

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

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

25%

50%

75%

مثال

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

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

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

مثال

<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>

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