<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>
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 = ""; }); });