deliteful-ProgressBar-custom-formatMessage

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<p><strong>ProgressBar sample - messages</strong></p>

<p>This sample shows how to customize messages by overriding progress bar methods.</p>

<hr>
<input id="loadBtn" type="button" value="load"/>
<d-progress-bar id="pb1"></d-progress-bar>
<input id="resetBtn" type="button" value="stop/reset"/>
<hr>

CSS

.d-progress-bar {
    width: 200px;
    font-style: italic;
    /*text-align: initial;*/
}

JavaScript

require.config({
    baseUrl: "http://ibm-js.github.io/libraries/master",     
});

require(["deliteful-build/layer"], function () {
    require([
        "deliteful/ProgressBar",
        "delite/theme!delite/themes/{{theme}}/global.css",	// page level CSS
        "requirejs-domready/domReady!"
    ], function () {
        var label = document.getElementById("lb");
        var progressBar = document.getElementById("pb1");
        var loadBtn = document.getElementById("loadBtn");
        var resetBtn = document.getElementById("resetBtn");
        loadBtn.disabled = false;
        resetBtn.disabled = true;
        var UPDATE_FREQ = 100; //ms
        var timerId = 0;
        
        //custom message: override ProgressBar format methods
        var lastValue = 0;
        progressBar.formatMessage = function(percent, value, max) {
            //formatMessage allows to customize the message
            var message;
            if (isNaN(value)) {//indeterminate
                message = "Click load to start transfer.";
            } else {
                if (percent === 1) {
                    message = "Transfert complete.";
                } else {
                    message = Math.round(percent * 100) + "% - " + ((value - lastValue) / UPDATE_FREQ)  + " KB/s";
                    lastValue = value;
                }
            }
            return message;
        };
        progressBar.formatExtMsg = function (percent, value, max) {
            if (percent === 1) {
                return "";
            } else {
                return Math.round((this.max - value)/1000) + " KB";
            }
        };
        progressBar.displayExtMsg = true;//allow extra message to display
        progressBar.value = NaN;//displays indeterminate state custom message
        
        
        //fake function which simulates a long task and updates the progress bar
        //accordingly to the progression.
        loadBtn.addEventListener("click",  function () {
           ...