require.config({ baseUrl: "http://ibm-js.github.io/libraries/master", }); require(["deliteful-build/layer"], function () { require([ "deliteful/ProgressIndicator" ], function (){ var label = document.getElementById("lb"); var progressIndicator = document.getElementById("pi"); var loadBtn = document.getElementById("loadBtn"); loadBtn.disabled = false; //fake function which simulates a long task and updates the progress indicator //accordingly to the progression. var fakeloadFunction = function () { loadBtn.disabled = true; //initiate and display the progress indicator progressIndicator.value = 0; progressIndicator.active = true; label.innerHTML = "Loading..."; var timerId = setInterval(function () { progressIndicator.value += Math.random() * 10 + 5; if (progressIndicator.value >= 100) { window.clearInterval(timerId); //task complete, disable the progress indicator progressIndicator.active = false; label.innerHTML = "Task complete."; loadBtn.disabled = false; } }, 200); }; loadBtn.addEventListener("click", fakeloadFunction); document.body.style.display = ""; }); });
<input id="loadBtn" type="button" value="Click to start displaying progress"/> <br> <d-progress-indicator id="pi"></d-progress-indicator> <br> <label id="lb"></label>