The Progress Element

With the progress element you can show the user how much a progress has finished of a task. It has two attributes: value, ie. a number for the finished part of the task, and max, ie. a number for the total task. Detailed description can be found at http://www.w3.org/TR/html-markup/progress.html#progress . On this webpage http://caniuse.com/#feat=progressmeter you can see which browsers do support the progress element. You can check whether your browser supports the progress element with the folloing JavaScript function.

var isPogressSupported = function () {
    return document.createElement("progress").max !== undefined;    //The attribute max will not be created if the progress element is not supported.
};

In the code box below you see a declaration of the progress element in HTML.

<progress id="progressBar" class="progressBar" value="100" max="1000"></progress>

You can see the instruction video at youtube by clicking on this text here. To see how it works: Play around!

Since the standard progress bar has no possibilities to change its color, since it has in different browsers on different operating systems another appearance and since it is not supported in all browsers, it might be that you feel the need for another way to inform the user about the progress of a progress. There are many possibilities and you can create one your self as the example below shows.

The code for this example is below, first the HTML, then the CSS and at last the JavaScript is shown.

<div id="progressbar">
    <div id="loadingprogress"></div>
    <div id="billyTheSlider"></div>
</div>

#billyTheSlider {
    position:         absolute;
    left:             0;
    top:              -6px;
    width:            30px;
    height:           30px;
    background:       url(picture/billyTheSlider.png) no-repeat;
}
#progressbar {
    width:            40em;
    height:           4px;
    position:         relative;
    border:           1px solid #ccc;
    margin:           10px;
    border-radius:    20px;
    background-color: #cccccc;
    vertical-align:   middle;
}
#loadingprogress {
    display:          inline-block;
    float:            left;
    border-radius:    20px;
    height:           4px;
    width:            0;
}

var billyProgress = (function () {
    var progressBar     = document.getElementById("progressbar"),
        loadingProgress = document.getElementById("loadingprogress"),
        billyTheSlider  = document.getElementById("billyTheSlider"),
        barwidth        = progressBar.offsetWidth,
        privateMax      = 0,
        position        = 0,
        privateValue    = 0,

    setValuePrivate = function (value) {
        privateValue = value; 
        position = (privateMax !== 0) ? barwidth * privateValue / privateMax : 0;
        if (position <= barwidth) {
            billyTheSlider.style.left	= position + "px";
            loadingProgress.style.width = position + "px";
        } else {
            billyTheSlider.style.left	= barwidth + "px";
            loadingProgress.style.width = barwidth + "px";
        }
    },

    setMaxPrivate = function (max) {
        privateMax = max; 
        position = (privateMax !== 0) ? barwidth * privateValue / privateMax : 0;
        if (position <= barwidth) {
          billyTheSlider.style.left   = position + "px";
          loadingProgress.style.width = position + "px";
        } else {
          billyTheSlider.style.left   = barwidth + "px";
          loadingProgress.style.width = barwidth + "px";
        }
    },

    setBackgroundColorPrivate = function (backgroundColor) {
        progressBar.style.backgroundColor = backgroundColor;
    },

    setColorPrivate = function (backgroundColor) {
       loadingProgress.style.backgroundColor = backgroundColor;
    };	

   return {
       setValue            :   function (value)    { setValuePrivate(value); },
       setMax              :   function (max)      { setMaxPrivate(max); },
       getValue            :   function ()         { return privateValue; },
       getMax              :   function ()         { return privateMax; },      //this is the Progress Indicator.
       setColo             :   function (color)    { setColorPrivate(color); }, //this is the Progress Bar Color.
       setBackgroundColor  :   function (color)    { setBackgroundColorPrivate(color); },
   };
}()),