Skip to main content
Practice

<progress> Tag

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


Attributes​

  • value (optional): Represents the current progress value. If this attribute is absent, the progress of the task is considered indeterminate.
  • max (optional): Sets the maximum value of the progress bar. The default value is 1.

Example Usage​

<!-- When the progress is 70% -->
<progress value="70" max="100"></progress>

<!-- When the maximum value is 1 and progress is halfway at 0.5 -->
<progress value="0.5"></progress>

Features​

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

  2. The <progress> tag is not a form element, so it does not send any value upon form submission.

  3. Most modern browsers provide default styling for the <progress> tag, but you can customize the style using CSS.


Applications​

  • Web Design: 100% Web Design

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

  • Mobile Design: 80% Mobile Design

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

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.