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.