Button with Spinner/Progress Indicator

In this blog I will be explaining, how to show a Button with Spinner/Progress Indicator in Oracle APEX.

In Oracle APEX, by default the spinner will be displayed on the page but in one of my requirements I had to display the spinner in a button instead of displaying it in the page. So I followed the below steps to achieve it.

1) Create a Region in the page,

2) Create a Button in the region. (In this example: P37_PROGRESS_BUTTON)

3) Add the class custom-button-spinner in the Appearance -> CSS Classes section of the button. 

4) Add the below code in the Execute When Page Loads section of the page.

    $element = $(this);
    $element.find(".t-Button-label").append('<span aria-hidden="true" class="fa-spinner fa fa-anim-spin margin-left-sm js-custom-spinner"></span>');


  • The above code uses the fa-spinner class to show the spinner.
  • fa-spinner can also be replaced with fa-refresh (or) fa-circle-o-notch to show the spinner in a different way.
  • When the button is clicked the button is automatically disabled until the page is reloaded. If this is not required, the line "$element.addClass("apex_disabled");" can be removed.
  • The class js-custom-spinner can be used to customize (change color, size etc..) of the spinner.
5) But this does not remove the default APEX spinner. It will still show when the button is clicked. To remove the default spinner add the below CSS code in the CSS -> Inline section of the page.
.u-Processing {
   display: none !important;
Note: The above code will remove the default APEX spinner for the entire page.

Click here for DEMO

Happy CODING !!!

Thank you :)


  1. This looks very cool and if I'd seen this last week, I would have used it for an app. Thanks!


Post a Comment

Popular posts from this blog

Copy the value of an Item to Clipboard in Oracle APEX

Display and Edit CLOB Content in Oracle APEX

Allow Only Number/Decimal values In a Number/Text Field Using JavaScript in Oracle APEX