본문으로 건너뛰기

progress Tag

<progress> Tag

The <progress> tag, introduced in HTML5, is used to represent the completion or progress status of a task.


Attributes

  • value (optional): Indicates the current progress value. If this attribute is not present, the progress status of the task is considered unknown.
  • max (optional): Sets the maximum value of the progress bar. The default value is 1.

Usage Examples

<!-- Case where progress is at 70% -->
<progress value="70" max="100"></progress>

<!-- Case where the maximum value is 1, and progress is at 50% -->
<progress value="0.5"></progress>

Features

  1. The <progress> tag is used for purely informational purposes, visually representing the amount of work completed or the progress status to the user.

  2. The <progress> tag is not a form element, so it does not have a value that is transmitted with form submission.

  3. Most modern browsers provide a default style for the <progress> tag, but it can be customized using CSS.


Application

  • Web Design: Web Design 100%

    <progress class="progress-color-1" value="100" max="100"></progress>
  • Mobile Design: Mobile 80%

    <progress class="progress-color-2" value="80" max="100"></progress>