%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده
سبد (0)

تبلیغات

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

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

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%

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

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

مثال

 

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

خودتان امتحان کنيد »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی