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 <span> and <progress> elements:<br><br>
Fraction of time elapsed since task last started:<br>
- as a percentage: <span id="PercentageValue">0</span>%<br>
- as a <progress> 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