Progress element | Progress object

Displays the progress of a time-intensive task.

HTML5 A vocabulary and associated APIs for HTML and XHTML

Syntax


 <progress value="15" max="50"/> 

DOM Information

Inheritance Hierarchy

 Node
  Element
   HTMLElement
     Progress

Members

The Progress object has these types of members:

Properties

The Progress object has these properties.

PropertyAccess typeDescription

form

Retrieves a reference to the form that the object is embedded in.

max

Read/write

Defines the maximum, or "done" value for a progress element.

msProgressAppearance

Read/write

This property is obsolete. Use animation-name instead.

position

Read-only

Returns the quotient of value/max when the value attribute is set (determinate progress bar), or -1 when the value attribute is missing (indeterminate progress bar).

value

Read/write

Sets or gets the current value of a progress element. The value must be a non-negative number between 0 and the max value.

 

Standards information

Remarks

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. If the value attribute is used without a maximum value, the range is from 0 to 1. To change the appearance from a ring to a bar, use the animation-name property to style the progress element's ms-fill pseudo-element. The progress element can be styled using CSS.


<html>
<head>
    <title>Progress bar example</title>
    <style type="text/css">
    #pbar
    {
        /* style the progress bar */
        border: 1px solid black;
        color: Blue;
        background-color:Yellow;
        }
    </style>

    <script type="text/javascript">
        function goingUp() {
            // add 5% to value
            var pBar = document.getElementById("pbar");
            if (pBar.value <= (pBar.max - 5)) {
                pbar.value += 5;
            }
            checkStatus();
        }

        function checkStatus() {
            // Shows position and value
            // -1 for indeterminate, otherwise current value divided by max.
            var pBar = document.getElementById("pbar");
            document.getElementById("positionStatus").innerHTML = "Value: " + pBar.value;
            document.getElementById("positionStatus").innerHTML += "<br/>Position: " + pBar.position.toFixed(3);
        }

        function toggle() {
            var pBar = document.getElementById("pbar");
            if (pBar.hasAttribute("value")) {
                //  Removing the value attribute makes the progress bar indeterminate
                pBar.removeAttribute("value");
                document.getElementById("tgl").innerHTML = "Make determinate";
            } else {
                //  Setting the value attribute makes the progress bar determinate
                pBar.value = 5;
                document.getElementById("tgl").innerHTML = "Make indeterminate";
            }
            checkStatus();
        }

</script>
</head>
<body onload="checkStatus();">
<h1>Progress bar test</h1>
  <p>Click Up to change to a determinate bar and use buttons move the progress up or down by 5% increments.</p>
  <div>
    <label id="progLabel">Progress: <progress id="pbar" max="100">Put alternate display here</progress></label>
    <button onclick="goingUp();">Up</button>
    <button id= "tgl" onclick="toggle();">Make determinate</button>
</div>
<div id="positionStatus"></div>
</body>
</html>


Styling progress controls

For info about styling progress controls, see How to style progress controls (Windows Store apps).

Note  For code samples, see Form controls part 1 and Form controls part 2: validation on the a Windows Store app using JavaScript sample site.

To create an indeterminate progress ring

To create an indeterminate progress ring, create a progress element without specifying a value or max and set its class to win-ring.


<progress class="win-ring"></progress>

(The win-ring class is one of the styles provided by the Windows Library for JavaScript.)

The next example shows how to create an indeterminate progress ring that also displays text.


<label class="progressRingText">
    <progress class="win-ring withText"></progress>Processing</label>

Here are the CSS styles that accompany the preceding example.


progress.withText
{
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}

/* Text style for a label for the progress ring */
.progressRingText
{
    font-family: "Segoe UI";
}

/* Text style for a label for a default size progress ring */
.progressRingText
{
    font-size: 11pt;
    line-height: 15pt;
}

/* The margin to separate the ring and its label */
.progressRingText progress
{
    margin-right: 5px;
}

See also

Quickstart: Adding progress controls (Windows Store apps)
How to style progress controls (Windows Store apps)
Guidelines and checklist for progress controls (Windows Store apps)

 

 

Show:
© 2014 Microsoft