تگ progress در HTML

در این مقاله با تگ progress در HTML آشنا می شوید.

نکات اصلی تگ Progress

• عنصر progress در HTML5 معرفی می شود ، یک کار مداوم را نشان می دهد و ممکن است سطح تکمیل آن را نشان دهد.
• به روشی مشابه اندازه گیری HTML کار می کند.
• میله های progress می توانند مشخص یا نامشخص باشند.
• تگ پایان را نمی توان حذف کرد.
• با Bootstrap می توانید  progress bar را به راحتی سبک کنید.

تگ Progress در HTML

تگ های progress برای تعیین یک نوار پیشرفت HTML استفاده می شود:

<p>Donuts eaten:</p>
<progress value="60" max="100"></progress>

ویژگی های احتمالی Progress

دو ویژگی اختیاری وجود دارد که می توانید با میله های پیشرفت HTML5 استفاده کنید:  max و value

ویژگی max کل کار مورد نیاز کار را مشخص می کند. این باید یک مقدار مثبت داشته باشد (مقدار پیش فرض 1 است):

<p>Ice cream devoured:</p>
<progress value="10" max="50"></progress>

ویژگی value  مشخص می کند که چه مقدار از این کار انجام شده است. این باید یک مقدار مثبت داشته باشد که از حداکثر آن فراتر نرود (یا اگر حداکثر مشخص نشده باشد) از 1:

<p>Slushies slurped:</p>
<progress value="30" max="100"></progress>

تعیین کننده است یا خیر؟

در مثال زیر می توانید دو نوار پیشرفت HTML5 را مشاهده کنید:

<p>Fridge emptied:</p>
<progress value="30" max="100"></progress>

<p>Belly filled:</p>
<progress max="100"></progress>

اولین مورد تعیین شده است: value مشخص شده ای دارد و بنابراین سطح اتمام کار را نشان می دهد.

در نوار دوم value تعریف نشده است ، که آن را غیرقطعی می کند. این بدان معناست که این فقط نشان می دهد که عمل هنوز در حال وقوع است. با این حال ، این نشان نمی دهد که چه بخشی از آن تکمیل شده و چه مقدار باقی مانده است تا انجام شود.

پشتیبانی مرورگرها

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.