akofaraji.ir
نوار پیشرفت (Progress Bar)
نوشته شده در تاریخ 31 خرداد 1403
نظرات: 0 امتیاز: 8 زمان مطالعه: 15 دقیقه
 
 
progress bar در بوت استرپ
 
 

نوار پیشرفت یا progress bar در بوت استرپ چیست؟

 

نوار پیشرفت یا progress bar در بوت استرپ، همانطور که از نامش پیدا است نواری است که وضعیت کاربر در یک پروسه را مشخص می کند. به عبارت دیگر به کاربر نشان می دهد چقدر در فلان عملیات پیشرفت کرده است. برای ساخت این نوع از عناصر باید به عنصر نگه دارنده، کلاس progress. و به عنصر فرزند نیز کلاس progress-bar. را بدهید. بقیه ی جزئیات با قوانین CSS (مانند width برای تعیین عرض نوار پیشرفت) قابل تنظیم هستند.

 

به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

تعیین ارتفاع

 

ارتفاع نوار پیشرفت به طور پیش فرض 16 پیکسل است ولی می توانیم با استفاده از قابلیت height در زبان CSS آن را تغییر دهیم. البته نکته ای که باید حتما به آن توجه کنید این است که حتما ارتفاع نگه دارنده (عنصر پدر) و خود نوار پیشرفت یکی باشند. به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

اضافه کردن متن به نوار پیشرفت

 

برای اضافه کردن متن به نوار های پیشرفت کافی است به خود عنصر متنی را اضافه کنید. مثال:

 

مشاهده ی خروجی در JSBin

 

ما در این مثال متن %70 را به متن اضافه کرده ایم.

 

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

 

همانطور که در مثال های قبلی دیده اید، رنگ پیش فرض برای نوارهای پیشرفت آبی است اما اگر از رنگ های بوت استرپ استفاده کنید، به راحتی تغییر می کنند:

 

مشاهده ی خروجی در JSBin

 

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

 

حتما دیده اید که در برخی از موارد، نوارهای پیشرفت در سایت های مختلف راه راه هستند یا طرح خاصی درونشان قرار گرفته است. شما با اضافه کردن کلاس progress-bar-striped. به عنصر مورد نظر می توانید این طرح های راه راه را به نوار خود اضافه کنید. به مثال زیر دقت کنید:

 

مشاهده ی خروجی در JSBin

 

اما این طرح هنوز هم به اندازه ی کافی جالب نیست و می توانیم به آن انیمیشن اضافه کنیم!

برای ایجاد انیمیشن در نوارهای وضعیت، از کلاس progress-bar-animated. استفاده کنید. با اضافه کردن انیمیشن به این نوارها حس بارگذاری واقعی در کاربر تداعی می شود:

 

مشاهده ی خروجی در JSBin

 

چند قسمتی کردن نوارهای پیشرفت

 

یکی از موارد کاربردی و بسیار جالب نوارهای پیشرفت، امکان تقسیم کردن نوار به قسمت های مختلف است.

به طور مثال در کد زیر گفته ایم که نوار به قسمت های عادی، هشدار، خطر و … تقسیم شود تا زمانی که مقدار چیزی به حد خطرناک رسید، کاربر از آن مطلع شود:

 

مشاهده ی خروجی در JSBin

 

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید