Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

نوار پیشرفت

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

کامپوننت‌های پیشرفت با دو عنصر HTML، مقداری CSS برای تنظیم عرض، و چند ویژگی ساخته می‌شوند. ما از .progress به‌عنوان قاب برای مشخص کردن حداکثر مقدار نوار پیشرفت استفاده می‌کنیم. .progress-bar نیاز به استایل داخلی، کلاس کمکی، یا CSS سفارشی برای تعیین عرض دارد.

25%
50%
75%
100%

نوار راه‌راه

اضافه کردن کلاس .progress-bar-striped برای ایجاد نوار پیشرفت راه‌راه

نوار متحرک

برای ایجاد نوار پیشرفت متحرک از کلاس .progress-bar-animated استفاده کنید.

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

برای ایجاد چند نوار پیشرفت با کمک کلاس progress.

نوار مرحله‌ای

برای تعیین تعداد مراحل نوار پیشرفت از کلاس .position-wrapper استفاده کنید.

نوارهای سفارشی

برای ایجاد نوار پیشرفت راه‌راه و متحرک از کلاس‌های .progress-bar-animated و .progress-bar-striped استفاده کنید.

0% شروع
30% در حال آپلود...
30%
60% در حالت توقف...
60%
70% در حال آپلود...
70%
100% تکمیل شد
100%

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

برای تعیین اندازه کوچک نوار پیشرفت از کلاس .sm-progress-bar استفاده کنید.

30 مگابایت داده
50 مگابایت داده
75 مگابایت داده

نوار پیشرفت بزرگ

برای ایجاد نوار پیشرفت بزرگ از کلاس .lg-progress-bar استفاده کنید.

25%
50%
75%
100%

سایزهای سفارشی

ارتفاع نوار پیشرفت را می‌توانید با تنظیم ارتفاع به صورت دلخواه تغییر دهید.