/

HTML / CSS / JavaScript Tutorial

HTML Element: <progress>

[this page | pdf | back links]

The HTML <progress> element is most commonly used to show the progress of some task. It is new in HTML 5. It is not very suitable for representing a gauge (like a fuel tank), for which better usually is to use a <meter> element.

 

For example, markup as follows:

 Progress so far: <progress value="40" max="100">

creates output that involves a progress bar showing that 40% of the task has been completed:

If you want the bar to be narrower than it is by default then you need to use the width attribute within the style of the element, e.g. markup as follows:

 Progress so far: <progress value="33" max="100" style="width:40px">

Usually a progress bar will be updated as time progresses, often using JavaScript.

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

max

Maximum value

Here

value

Value of element

Here

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above. It also supports the following additional properties:

 

Property

Description

More

labels

Returns a list of the progress bar labels (if any)

Here

position

Returns current position of progress bar

Here

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Usually a progress bar is updated as time progresses, often using JavaScript. The example below
mimics a task that repeats ad infinitem and shows the progress in numerical and
graphical form using &lt;span&gt; and &lt;progress&gt; elements:<br><br>

Fraction of time elapsed since task last started:<br>
- as a percentage: <span id="PercentageValue">0</span>%<br>
- as a &lt;progress&gt; element: <progress id="ProgressValue" value="0" max="100" style="width:40px"></progress><br><br>

<script>
window.addEventListener('load', UpdateTimeElapsed, false);

function UpdateTimeElapsed() {
  var ProgressBarTimerID = null // will contain setInterval() ID when starting progress bar
  var RestartTaskID = null //will contain setInterval() ID when repeatedly resetting progress bar
  var TimeStepSize = 500 // i.e. time step in milliseconds
  var MaxTimeStepValue = 10 // i.e. maximum number of time steps
  var OverallTime = TimeStepSize * MaxTimeStepValue // overall length of time taken to end of task  
  var CurrentTimeStepValue = 0 // i.e. the current step value
  var TimeBetweenRepeats = OverallTime * 1.25;
  var PercentageValueID = "PercentageValue" // will contain <div> element containing percentage value
  var ProgressBarID = "ProgressValue" // will contain <progress> element 
  var PercentageValueObject = null // will contain <div> element containing percentage value
  var ProgressBarObject = null // will contain <progress> element 

  InitialiseVariables();
  if (InsufficientSlideShowMarkup()) { return; }
  StartProgressBar();

  // functions used above

  function InitialiseVariables() {
    PercentageValueObject = (document.getElementById(PercentageValueID) ? document.getElementById(PercentageValueID) : null);
    ProgressBarObject = (document.getElementById(ProgressBarID) ? document.getElementById(ProgressBarID) : null);
    CurrentTimeStepValue = 0
    PercentageValueObject.innerHTML = 100 * CurrentTimeStepValue / MaxTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    ProgressBarObject.max = MaxTimeStepValue;
  }

  function InsufficientSlideShowMarkup() { // checks relevant HTML elements are present
    if (!PercentageValueObject) { return true; }
    if (!ProgressBarObject) { return true; } 
    return false;
  }

  function StartProgressBar() {
    RestartTask();
    setInterval(RestartTask, TimeBetweenRepeats);
  }

  function RestartTask() {
    CurrentTimeStepValue = 0
    PercentageValueObject.innerHTML = CurrentTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    ProgressBarObject.max = MaxTimeStepValue;
    ProgressBarTimerID = setInterval(TransitionValue, TimeStepSize);
  }

  function TransitionValue() { // i.e. increments the time shown in the <div> and <progress> elements
    ++(CurrentTimeStepValue);
    PercentageValueObject.innerHTML = 100 * CurrentTimeStepValue / MaxTimeStepValue;
    ProgressBarObject.value = CurrentTimeStepValue;
    if (CurrentTimeStepValue >= MaxTimeStepValue) {
      clearInterval(ProgressBarTimerID); }
  }
}
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile