Change loading icon in oracle APEX with just CSS

Okay so how can we change the loading(indicator) icon which is given by Oracle Application Express(5.0,5.1.*) with just CSS only yeah you heard me right with just a simple CSS.

Let's dig into it a bit more. Assume we already have loading indicator icon on some of the page of our Oracle APEX application if we inspect it it will have a class u-Processing  we will grab that class and modify css based on our requirement.


1) Here we are going to hide the Loading icon with transparent color

.u-Processing { content:  "<div class=\"Name2\"></div>" !important;
    height: 10% !important;
    width: 30% !important;
    cursor: text !important;
    border-radius: 0% !important;  
    background-color: transparent !important;
    z-index: 1000 !important;
}


2)Then in second step we actually going to append our text before loading icon comes

.u-Processing:before{ content:  'Please wait...' !important;
    height: 10% !important;
    width: 50% !important;
    cursor: text !important;
    border-radius: 0% !important;
    font-size: 200%  !important;
    background-color: White !important;
    z-index: 1000 !important;
}

Here i have created a DA which fires on page load which will refresh our region on same page.

So lets see how it looks....

Note* : For someone who does not know why i have used !important please continue reading.

It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

Also, ordinarily, a more specific rule will override a less-specific rule. So:

a {
    /* css */
}
Is normally overruled by:

body div #elementID ul li a {
    /* css */
}
As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the 'more-', or the 'less-', specific selector as it's always more specific.

If, however, you add !important to the less-specific selector's CSS declaration, it will have priority.

P.S. : Use !important only when necessary.

YouTube : https://youtu.be/BkQVrjXPj74