آموزش و يادگيري تگ progress در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <progress> آشنا مي‌شويم. اين تگ براي نمايش پيشرفت يک فرايند، مانند دانلود، بارگذاري يا تکميل فرم‌ها استفاده مي‌شود.

تگ progress در HTML چيست؟

تگ <progress> يک نوار پيشرفت (Progress Bar) ايجاد مي‌کند که مقدار پيشرفت را به کاربر نشان مي‌دهد. اين تگ مي‌تواند با ويژگي‌هاي value و max مقدار فعلي و حداکثر مقدار پيشرفت را مشخص کند.

مثال ساده از تگ progress

<label>دانلود فايل:</label>
<progress value="30" max="100">30%</progress>

در اين مثال، نوار پيشرفت 30 درصد کامل است و حداکثر مقدار 100 تعيين شده است.

ويژگي‌هاي مهم تگ progress

مثال پيشرفته با CSS

<style>
progress {
  width: 300px;
  height: 20px;
  appearance: none;
}

progress::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

progress::-webkit-progress-value {
  background-color: #2196f3;
  border-radius: 10px;
}
</style>

<label>بارگذاري:</label>
<progress value="50" max="100">50%</progress>

با استفاده از CSS، مي‌توان ظاهر نوار پيشرفت را شخصي‌سازي کرد و رنگ، اندازه و شکل آن را تغيير داد.

نکات مهم درباره progress

• تگ <progress> براي نمايش وضعيت پيشرفت استفاده مي‌شود و نيازي به جاوااسکريپت ندارد، مگر بخواهيد مقدار آن را دايناميک تغيير دهيد.
• ويژگي value بايد عددي بين 0 و مقدار max باشد.
• در صورت نبود مقدار value، مرورگر يک نوار پيشرفت نامحدود (indeterminate) نمايش مي‌دهد.

براي يادگيري کامل استفاده از نوارهاي پيشرفت و فرم‌هاي تعاملي در صفحات وب، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.