deliteful-ProgressBar-custom-message

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
<input id="loadBtn" type="button" value="Click to start the progress bar"/>
<br>
<d-progress-bar id="pb" min="0" max="100" value="0" message="Click the button to start"></d-progress-bar>
<br>
<label id="lb"></label>

JavaScript

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

require(["deliteful-build/layer"], function () {
    require([
        "deliteful/ProgressBar"
    ], function (){
        var label = document.getElementById("lb");
        var progressBar = document.getElementById("pb");
        var loadBtn = document.getElementById("loadBtn");
        loadBtn.disabled = false;
        //fake function which simulates a long task and updates the progress bar
        //accordingly to the progression.
        var fakeloadFunction = function () {
            loadBtn.disabled = true;
            //initiate and display the progress bar
            progressBar.value = 0;
            label.innerHTML = "Loading...";
            var timerId = setInterval(function () {
                progressBar.value += Math.random() * 10 + 5;
                progressBar.message = "Loaded at " + progressBar.value.toPrecision(3) + " %";
                if (progressBar.value >= 100) {
                    window.clearInterval(timerId);
                    //task complete, disable the progress bar
                    label.innerHTML = "Task complete.";
                    loadBtn.disabled = false;
                    progressBar.message = "Click the button to start";
                }
            }, 200);
        };
        loadBtn.addEventListener("click", fakeloadFunction);
        document.body.style.display = "";
    });
});