Qarpeo LogoInstitute

<progress>

The <progress> element in HTML represents the progress of a task, such as a file upload or form submission, displaying a visual bar that indicates how much of the task has been completed.

<progress> Tag

The <progress> element in HTML represents the progress of a task, typically shown as a progress bar. It displays a value between 0 and a defined maximum to indicate how much of the task has been completed.

Syntax

index.html
<progress value="current" max="maximum">Fallback text</progress>

<progress> Demo

70%
index.html
<progress value="70" max="100">70%</progress>

Attributes

AttributeValueDescription
maxnumberDefines the total amount of work required to complete the task. The default value is 1.
valuenumberIndicates the progress made towards completing the task.
For better accessibility, pair the <progress> tag with a <label> element.
  • max: Defines the total amount of work needed. It must be a positive floating-point number, with a default value of 1.
  • value: Represents the completed portion of the task, ranging from 0 to the max (or 0 to 1 if max is not specified). If the value is not provided, the progress bar will appear indeterminate, indicating ongoing activity without a defined endpoint.

Purpose and Usage

The <progress> tag visually indicates the progress of a task, such as file uploads or loading processes.

Additional Notes

JavaScript can be used alongside the <progress> tag to dynamically update task progress.
The <progress> tag is not intended for showing static measurements like disk space or query relevance. Use the <meter> tag for such cases.

See Also

  • -moz-orient: A Mozilla (Firefox) specific property that controls the orientation of the progress bar.
  • ::-moz-progress-bar: A pseudo-element used to style the progress bar in Firefox.
  • ::-ms-fill: A Microsoft (Edge/IE) specific pseudo-element for styling the progress fill.
  • ::-webkit-progress-bar: A WebKit (Chrome, Safari, Edge) pseudo-element that styles the background of the progress bar.
  • ::-webkit-progress-value: Styles the filled portion of the progress bar in WebKit browsers.
  • ::-webkit-progress-inner-element: Used in some older WebKit implementations for further customization.
These elements and properties help customize the appearance of the <progress> tag across different browsers.

Conclusion

The <progress> tag is used to visually represent the progress of a task, such as file uploads or loading processes, with a value indicating the completion status. It is defined by the value and max attributes, allowing for dynamic updates. If no value is provided, it shows an indeterminate progress bar. However, it's not suitable for static data, where the <meter> tag would be a better choice.

<output>

The HTML <output> element shows the result of a user action or calculation, such as data generated by form inputs or scripts, allowing for the display of dynamic content.

<search>

The HTML (<input type="search">) element generates a search box, enabling users to enter and submit search queries, often featuring enhancements for a better search experience.