Changing the loading icon

This requirement is very typical. We need to modify the default loading animation of Pega to a custom image.

Steps

Create a Binary File rule and upload the image

Add the following script in the UserWorkForm HTML rule

<script>
pega.ui.busyIndicator.prototype.createIndicatorImage = function() {
    if (this.oSpan == null)
        this.initialize(this._sNode);
    var oSpan = this.oSpan;
    var oLoading = "loading";
    if (typeof(strLoadingMsg) != "undefined" && strLoadingMsg)
        oLoading = strLoadingMsg;
    if (this._message && this._message.length > 0) oSpan.innerHTML =
        "<div class='throbber' role='progressbar' aria-valuetext='Loading content'  tabindex='0'>" + "<div class='loader'></div><div class='lds-heart'><div></div></div></div></div>" + this._message;
    else oSpan.innerHTML = "<img src = 'webwb/BookGif.gif' alt='loading' />";
 
}
</script>

Log in again into Pega and see the results