Hi,

In Pega 8.x, the throbber is no longer using an animating gif but instead use a CSS spinner (spinner animated by CSS animations)

Some of the details are covered in these docs

• https://community.pega.com/support/support-articles/change-default-pega-busy-indicator-image
• https://collaborate.pega.com/question/customize-default-screen-load-or-refresh-image

If you want to override the CSS spinner, Just override the function ‘pega.ui.busyIndicator.prototype.createIndicatorImage’ in a JS file attached to your portal harness or in userworkform

For example this site has example of generating CSS spinner https://loading.io/css/

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 =
        "<div class='throbber' role='progressbar' aria-valuetext='Loading content'  tabindex='0'>" + "<div class='loader'><div class='lds-heart'><div></div></div></div></div>";
 
}

Add the CSS selectors to an override file attached to your skin and you will be all set.

Thank You,