HTML Progress Element

From WikiOD

Parameters[edit | edit source]

Parameter Value
max How much work the task requires in total
value How much of the work has been accomplished already
position This attribute returns the current position of the <progress> element
labels This attribute returns a list of <progress> element labels (if any)

Remarks[edit | edit source]

The <progress> element is not supported in versions of Internet Explorer less than 10

The <progress> element is the wrong element to be used for something that is just a gauge, rather than the task progress. For example, showing the usage of disk space by using the <progress> element is inappropriate. Instead, the <meter> element is available for this type of use cases.

Progress[edit | edit source]

The <progress> element is new in HTML5 and is used to represent the progress of a task

<progress value="22" max="100"></progress>

This creates a bar filled 22%

Changing the color of a progress bar[edit | edit source]

Progress bars can be styled with the progress[value] selector.

This example gives a progress bar a width of 250px and a height of 20px

progress[value] {
  width: 250px;
  height: 20px;
}

Progress bars can be especially difficult to style.

Chrome / Safari / Opera[edit | edit source]

These browsers use the -webkit-appearance selector to style the progress tag. To override this, we can reset the appearance.

progress[value] {
  -webkit-appearance: none;
  appearance: none;
}

Now, we can style the container itself

progress[value]::*webkit*progress*bar {
  background-color: "green";
}

Firefox[edit | edit source]

Firefox styles the progress bar a little differently. We have to use these styles

progress[value] {
  -moz-appearance: none;
  appearance: none;
  border: none;                /* Firefox also renders a border */
}

Internet Explorer[edit | edit source]

Internet Explorer 10+ supports the progress element. However, it does not support the background-color property. You'll need to use the color property instead.

progress[value]  {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  border: none;                       /* Remove border from Firefox */

  width: 250px;
  height: 20px;

  color: blue; 
}

HTML Fallback[edit | edit source]

For browsers that do not support the progress element, you can use this as a workaround.

<progress max="100" value="20">
    <div class="progress-bar">
        <span style="width: 20%;">Progress: 20%</span>
    </div>
</progress>

Browsers that support the progress tag will ignore the div nested inside. Legacy browsers which cannot identify the progress tag will render the div instead.

Credit:Stack_Overflow_Documentation