این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ progress در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ progress در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Progress در HTML
تگ progress تگی است که با استفاده از آن میتوان میزان درصد پیشرفت از ( یک کار ، پروژه و.. ) را مشخص کرد.
Free-Learn
مثال از تگ progress در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ Progress با مشخص کردن مقدار
|
1 2 3 4 5 6 |
<body> میزان پیشرفت پروژه : <progress value="75" max="100"></progress> </body> |
مثال شماره ۲ : استفاده از تگ Progress بدون هیچ صفتی
|
1 2 3 4 5 |
<body> <progress></progress> </body> |
مثال شماره ۳ : استایل دادن به تگ Progress با استفاده از CSS
|
1 2 3 4 5 6 7 8 |
progress{ width:100%; display:block; padding:3px; border:none; background-color:#000; border-radius:10px; } |
مثال شماره ۴ : ساخت یک Progress سفارشی استفاده از CSS ( بدون استفاده از تگ progress )
|
1 2 3 4 5 6 7 |
<body> <div id="MyProgress"> <div style="width: 40%;"></div> </div> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ progress در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ progress در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| max | number | حداکثر مقدار تگ Progress |
| value | number | مقدار فعلی تگ Progress |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ progress از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- اگر میخواهید یک گیج اندازه گیری ( Gauge ) داشته باشید، سعی کنید حتما از تگ Meter که مناسب اینکار است استفاده نمایید.
