site logo

Element progress

The graphic element progress  represents the ratio of actual and maximal numeric values as the length of the colored bar. The maximal length is marked by border or by gray background of element. That goes well for visualization of voting results, the relevance for search results, or to display the degree of completion of an large form, etc..

The element progress  is described in HTML5 specification and is implemented in browsers Chrome, Firefox and Opera. It is essentially a simplified version of element meter.

Attributes of element progress

attributedescription
max This attribute specifies the upper value of the range. The default value is 1. The lower value is always 0 and can not be changed.
valueThis attribute specifies the current value, ie what proportion of the max is valid.

When the default range 0 to 1 is suitable, all you need is to specify the attribute value. Missing attribute value is indicated as moving bar. Attribute max is useful for changing of the scale. Attributes value and max are used for calculation of the bar length. Opening and closing tag of element progress are required, and the text between these tags will be displayed in browsers that do not support the element.

Because the progress  element is used to display some variable data, the attribute value can be set by javascript, or can be inserted by server-side script when page is generated.

Element progress and CSS

elementused CSS
test 1default style
test 2 background: #eee;
test 3 class="styleP"
progress with help of <div>
value setting

On the left are live examples of the element progess in several modifications. The range element at bottom allows to set value and so change the length of bar. Browsers IE and Firefox which do not know the range, display textbox into which new value can be typed in. The bar length is adjusted when the textbox loses focus (click outside the box).

Matching of visual compliance in various browsers is shown in the following screenshot. Remember that the element is still in development and certainly will undergo some changes. The dimension of element is set with properties width and height. Setting the background property changes element into the classic look. Style used in the third row is the result of efforts to unify the appearance and is described below. In the last row is progress substitution with help of div element.

screenshot: element progress in various browsers

Opera Browser does not allow to set the color of the bar. When the background property is set, color of bar is also slightly changed in all browsers. Chrome and Firefox uses vendor prefixed pseudoclasses to set background and bar color. Notice how the property -progress-bar  in both browsers is applied to a different part of element.


...
<style type="text/css">

progress {height: 16px; width: 120px; margin: 0 auto; padding: 0; display: block;}

.styleP {background: #ccc;}
.styleP::-webkit-progress-bar   {background: #ccc;}
.styleP::-webkit-progress-value {background-color: #0a0; border:1px solid #555;}
.styleP::-moz-progress-bar      {background-color: #0a0; border:1px solid #555;}
</style>
</head>

<body>
...
<progress id="m1" value="0.33">test 1</progress>
...
</body>
</html>

Unlike other browsers, Firefox has the ability to set property -moz-orient: vertical; , for rendering progress element in a vertical position. In this case also properties width and height  have to be set properly. Vertical orientation could be suitable for creating simple bar graphs.

Substitution of element progress

In the last row of live experiments, there is the orange element which behaves similarly to progress and is visible in IE browser, which does not display the standard progress element. It is based on the element div, and changing the property border-left. There is no need for auxiliary img. A more detailed description of this principle can be found at CSS graf article.


...
<style type="text/css">
...
.divBar{width: 120px; height: 16px; border: 0; border-left: 39px solid #f80;
        background: #ccc; box-sizing: border-box; -moz-box-sizing: border-box;}
...
</style>

<script type="text/javascript">
function fn(n) {
  ...
  document.getElementById("divBar").style.borderLeft =
   parseInt(n*120) + "px solid #f80";
}
</script>
</head>

<body>
...
<div id="divBar" class="divBar"></div>
...
</body>
</html>

Listing of code is simplified for easier readability. The final javascript code should contain the test for div size overrun. The calculation of borderLeft ought to be based on the actual width of the element insted of using constants (in code red).

updated 2011-12-14