پیشرفت (progress)
با «نوار پیشرفت (Progress Bar)» وضعیت انجام کار را نشان می دهیم. تگ «progress» مقدار انجام شده تا کل کار را نمایش می دهد. مثل دانلود در موبایل که درصد جلو می رود.
تعریف و کاربرد
عنصر «progress» میزان تکمیل یک کار را نمایش می دهد. برای دسترس پذیری، همیشه همراه با «برچسب (Label)» استفاده کن.
نمونه ساده نوار پیشرفت
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
ویژگی ها (Attributes)
max: کل کار را مشخص می کند. مقدار پیش فرض 1 است.
value: مقدار انجام شده را مشخص می کند. مقدار باید ≤ max باشد.
نکته: اگر «value» را حذف کنی، وضعیت «نامشخص» نمایش داده می شود.
دسترس پذیری و نکات
حتماً از label برای توضیح استفاده کن. همچنین برای سنجش ثابت مثل فضای دیسک، از meter بهره ببر؛ «progress» برای روند انجام کار است.
هشدار: «progress» گیج یا امتیاز را نشان نمی دهد. برای این موارد «meter» مناسب است.
برای متن های چندخطی کد یا نمایش خروجی ثابت، می توانی از pre استفاده کنی.
گام های عملی
- یک برچسب بساز و attribute for را تنظیم کن.
- تگ «progress» با value و max اضافه کن.
- در صورت نیاز، مقدار value را با اسکریپت به روزرسانی کن.
برای آشنایی بیشتر با نوار پیشرفت همین صفحه را نشانک کن.
جمع بندی سریع
- «progress» میزان انجام کار را نشان می دهد.
- همیشه همراه «label» استفاده کن.
- برای گیج ها از «meter» استفاده کن.
- «max» کل کار، «value» مقدار انجام است.