آموزش تگ progress در HTML

2 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ 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 پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

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

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

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

"جدول

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

تگ Progress قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

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

  • اگر میخواهید یک گیج اندازه گیری ( Gauge ) داشته باشید، بهتر است حتما از تگ Meter استفاده نمایید و دلیل این کار هم این است که Meter مناسب ترین تگ برای این کار است.
برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید