آموزش تگ progress در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ progress در HTML با من همراه باشید.

آموزش تگ progress در HTML

Free-Learn

تگ Progress در HTML

تگ progress تگی است که با استفاده از آن میتوان میزان درصد از پیشرفت یک کار یا عمل یا در واقع همون پروژه را مشخص کرد.

Free-Learn

مثال از تگ progress در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ Progress با استفاده از CSS

در دستورات زیر که متعلق به زبان CSS می باشد ، ۲ دستور داریم به اسم های :

  • -webkit-progress-bar
  • -moz-progress-bar

که ممکنه کمی براتون عجیب غریب باشه! نگران نباشید چیز خاصی نیست، webkit و moz فقط برای اینه که مرورگرهای گوگل کروم و موزیلا فایرفاکس از این ویژگی پشتیبانی کنند.

یعنی webkit برای مرورگرهای گوگل کروم (Chrome)،اوپرا/اپرا (Opera) و سافاری (Safari) و moz برای مرورگر موزیلا فایرفاکس می باشد.

امتحان کنید

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ progress در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی ۸٫۰ ۱۶٫۰ ۱۱٫۰ ۶٫۰ ۱۰٫۰

Free-Learn

جدول صفات تگ progress در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

نام صفت مقدار توضیح
max number بیشترین/حداکثر مقدار را برای تگ Progress مشخص میکند.
value number میزان/مقدار پیشرفت پروژه را مشخص میکند.

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ progress از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ progress یک تگ جدید/اضافه شده در HTML5 می باشد.

اگر میخواهید یک گیج اندازه گیری (Gauge) داشته باشید و از طریق آن میزان فضا یا اندازه یک عنصر را به نمایش بگذارید سعی کنید حتما از تگ Meter که مناسب اینکار است استفاده نمایید.

Free-Learn

دستورات CSS پیش فرض

این تگ هیچ دستور CSS پیش فرضی ندارد.

Free-Learn