RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/html/elements/progress below:

progress · WebPlatform Docs

progress Summary

The HTML <progress> element represents the completion progress of a task.

Overview Table

DOM Interface: HTMLProgressElement

Permitted contents Phrasing content, but may not contain any `` elements itself. Permitted parents Any element that can contain phrasing content. Tag omission A `` element must have both a start tag and an end tag.

The HTML `

` element is a number in the range zero to a maximum, giving the fraction of work that has so far been completed. The progress element is not the correct element to use for something that is just a gauge, as opposed to task progress. For instance, indicating disk space usage using progress would be inappropriate. Instead, the [meter](/html/elements/meter) element is available for such use cases.

The content of the progress element should represent the set min/max/value attributes in human readable form. This will be picked up by assistive technologies as well as act as a fallback for browsers not supporting the element.

Attributes

This element supports the HTML5 global attributes.

value: How much of the task has been completed. If max is not set, this should be a value between 0 and 1, if max is set, this should be a value between 0 and max.
max; How much work the task requires in total. This is optional, if it’s not set then value is a percentage.

Examples

Example of a basic progress element

<progress value="165" max="200">165 of 200 finished</progress>

View live example

Example of progress without a maximum

<progress value="0.72">72% done</progress>

View live example

Styling options for the progress bar (vendor-specific)

progress {
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  background-color: lightgray;
}

progress::-webkit-progress-value {
  background-color: lightgreen;
}

View live example

Progress element without value

<progress></progress>

View live example

Usage

 When the value attribute is omitted, the <progress> element becomes indeterminate, that is, it shows activity but not how much progress has actually been made.

Related specifications

HTML 5.1: W3C Working Draft
HTML 5: W3C Recommendation