Progress Bar

The progressmeter tag presents an indicator of progression in the form of bar of which the contents is filled progressively with the completion of the task that is measured. The most current examples are the remote loading of a file, or the installation of a software.

Progressmeter and attributes

progressmeter

The tag which displays the bar of progression. It must be initialized to 0 by the attribute value, otherwise one will not be able to update the indicator.

mode

The value "determined" Indicates that the total duration of the action is known at the beginning, and it is the default value. If it is not knows, "undetermined" should be assigned. In this case one cannot change the indicator.

value

The value attribute determines the size of the contents of the progressmeter when it is given. It is a value expressed as a percentage and it thus goes from 0 to 100%. One associates an event manager the progressmeter which assigns this attribute progressively as the measured action advances.

Example of use

For the needs for the example one will enter directly some values entered into a textbox by you, which will be assigned to the indicator.

Creation of the indicator:

<hbox style="padding:16px">
    <progressmeter id="MyPM" value="0%"/>
</hbox>

Addition of a textbox and a button with an oncommand attribute that calls the function that changes the progressmeter:

<textbox id="inp" size="5" value="50" />
<button label="Change" oncommand="setProgress(); " />

The Javascript code:

var inp = document.getElementById("inp");
var mpm = document.getElementById("MyPM");
	
function setProgress()
{
    var x = parseInt(inp.value);
    mpm.value = x;
}

One assigns the textbox and progressmeter objects to variables (inp and mpm) to be able to read the value of the one and to assign it to the second. The entered text is converted into integer by the function parseInt () as progressmeter expects for a numerical value.
In a real application, the value will be obtained by some function.

• Demo code.zip.