آموزش تگ progress در HTML

آموزش تگ progress در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ progress
در HTML به صورت کامل آشنا بشید.
تگ progress در HTML
با استفاده از تگ progress
میتوانیم میزان یا درصد پیشرفت از یک کار ، پروژه و… را مشخص کنیم و بدانیم که چقدر پیشرفت داشته ایم.
مثال از تگ progress در HTML
در ادامه دوره آموزشی html css پروژه محور به یک مثال از تگ progress
میپردازیم تا شما عزیزان درک بیشتر و بهتری از این تگ داشته باشید.
مثال اول : استفاده از تگ Progress با مشخص کردن مقدار آن
<body> میزان پیشرفت پروژه : <progress value="75" max="100"></progress> </body>
دومین مثال : استفاده از تگ Progress
بدون استفاده کردن از صفت
<body> <progress></progress> </body>
مثال شماره ۳ : استایل دهی به تگ Progress با استفاده از کد CSS اختصاصی
progress{ width:100%; display:block; padding:3px; border:none; background-color:#000; border-radius:10px; }
مثال چهارم: ساخت یک Progress
سفارشی با استفاده از CSS و بدون استفاده مستقیم از تگ progress
<body> <div id="MyProgress"> <div style="width: 40%;"></div> </div> </body>
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید
پشتیبانی مرورگرها از تگ Progress
در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ Progress
در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…
جدول صفات تگ progress در HTML
جدول زیر به شما کمک میکند تا بتوانید صفات تگ Progress
را به همراه مقادیری که میتوانیم در این تگ استفاده کنیم را مشاهده نمایید.
پشتیبانی تگ Progress از صفات و رویدادهای عمومی
تگ Progress
قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.
نکات و توضیحات
- اگر میخواهید یک گیج اندازه گیری ( Gauge ) داشته باشید، بهتر است حتما از تگ Meter استفاده نمایید و دلیل این کار هم این است که Meter مناسب ترین تگ برای این کار است.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید