HOW DO I Use Javascript for A SPINNER in ORACLE APEX

Adding a JavaScript-powered spinner to your Oracle APEX application enhances user experience by clearly showing when a process is running. Whether submitting a page, refreshing a region, or calling an Ajax process, users benefit from visual feedback that something is happening in the background. JavaScript gives you complete control over when the spinner is shown or hidden and works well alongside APEX buttons, dynamic actions, and asynchronous processes. This blog explains how to build, style, and control a spinner entirely using JavaScript in Oracle APEX.

How to Use JavaScript for a Spinner in Oracle APEX

1. Create the Spinner Element
   Add a spinner container to a Static Region or directly into the page template. For example:

   <div id="jsSpinner" class="spinner" style="display: none;"></div>
   

2. Add the CSS to Style the Spinner
   Place this CSS in your page’s Inline CSS section (Page → CSS → Inline):

   .spinner {
     width: 50px;
     height: 50px;
     border: 6px solid #f3f3f3;
     border-top: 6px solid #3498db;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     position: fixed;
     top: 50%;
     left: 50%;
     margin-top: -25px;
     margin-left: -25px;
     z-index: 1000;
   }
   
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   

3. Control the Spinner with JavaScript
   Use simple JavaScript to show or hide the spinner when needed:

   function showSpinner() {
     document.getElementById("jsSpinner").style.display = "block";
   }
   
   function hideSpinner() {
     document.getElementById("jsSpinner").style.display = "none";
   }
   

   Call these functions inside Dynamic Actions, Ajax callbacks, or in your custom JavaScript logic.

4. Use with a Button Click
   You can attach a Dynamic Action to a button with the Execute JavaScript Code action:

   showSpinner();
   apex.submit('PROCESS_NAME');
   

5. Hide the Spinner After Completion
   In your page’s Page Submit Success or Ajax Callback Success, call hideSpinner(); to remove the spinner once the operation is complete.

Adding a Spinner via JavaScript to an Oracle APEX Page

A spinner (loading indicator) can be added to an Oracle APEX page using JavaScript. This allows you to display the spinner when an action (such as a button click or AJAX call) starts and hide it when the action completes.

Steps to Add a Spinner Using JavaScript

1. Add a Spinner to the Page

1. Open Oracle APEX Page Designer.

2. In the Rendering pane, under Regions, add a new Static Content region.

3. Set the Static ID of the region to spinnerContainer.

4. In the Region Source, add the following HTML:

<div id="spinnerContainer" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">

    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">

        <div class="spinner"></div>

    </div>

</div>

---

2. Add CSS for Spinner Animation

1. In Page Designer, go to Page Attributes > Inline CSS.

2. Add the following CSS code:

/* Spinner Animation */

.spinner {

    width: 50px;

    height: 50px;

    border: 6px solid #f3f3f3;

    border-top: 6px solid #3498db;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

3. Create JavaScript Functions to Show and Hide the Spinner

1. In Page Designer, go to Page Attributes > Inline JavaScript (Function and Global Variable Declaration).

2. Add the following JavaScript code:

function showSpinner() {

    document.getElementById("spinnerContainer").style.display = "block";

}

function hideSpinner() {

    document.getElementById("spinnerContainer").style.display = "none";

}

4. Show Spinner on Button Click

1. Select the Button that should trigger the spinner (e.g., "Submit").

2. In Properties, scroll to the Advanced section.

3. In Attributes, add:

onclick="showSpinner();"

5. Hide Spinner When AJAX Process Completes

If your page has a process running via AJAX callback, you can modify it to hide the spinner once it completes.

1. Open the AJAX Callback Process.

2. Modify the JavaScript Code that calls it:

showSpinner();

3. 
   

apex.server.process("MY_PROCESS", {

    pageItems: "#P1_ITEM"

}, {

    dataType: "text",

    success: function(data) {

        hideSpinner();

    },

    error: function() {

        hideSpinner();

    }

});

This method allows you to dynamically show and hide a loading spinner using JavaScript. The spinner appears when a user initiates an action, and it disappears once the process completes, improving user experience by providing visual feedback during processing.

Option 3 EXAMPLE -Using JavaScript

Material APEX overwrites apex.util.showSpinner() with the same arguments, so you can use the same code as you would using Universal Theme.

Examples

// adds a spinner to the body

spinner.remove();

var spinner = apex.util.showSpinner();

// adds a spinner to #some-region

var spinner = apex.util.showSpinner("#some-region");

spinner.remove();

// adds a big spinner to #some-region

var spinner = apex.util.showSpinner("#some-region", {size:"big"});

spinner.remove();

// adds a big blue spinner to #some-region

var spinner = apex.util.showSpinner("#some-region", {size:"big",color:"blue"})

spinner.remove();

// adds a small yellow spinner to #some-region

var spinner = apex.util.showSpinner("#some-region", {size:"small",color:"yellow"}); 

spinner.remove();

Step 1 – Use the browser Developer tools and find the ID, or the class, of the button

Step 2 – At the PAGE level, add your CSS using the button’s class or ID

 

Your CSS might look something like this:

/*#B40221631299266322*/

.t-Button--primary.a-Button--noUI, .t-Button--primary.t-Button--noUI {

/*background-color: white;*/

background: rgba(255, 254, 254, 0.1);

  color: white;

  border: 0px solid #04AA6D; /* Green */

  transition-duration: 0.4s;

  width: 350px;

  height:200px;

  border-radius: 8px;

 padding: 32px 16px;

  font-size: 24px;

  /*opacity: 0.3;

 

*/

}

/*button :hover*/

.t-Button--primary.a-Button--noUI, .t-Button--primary.t-Button--noUI:hover {

 background-color: #04AA6D; /* Green */

  color: white;

}

Best Practices for Using JavaScript Spinners

• Always ensure the spinner is hidden after any process completes to avoid confusing the user.

• Position the spinner in the center of the screen for clarity, or near the action area if preferred.

• Combine spinner display with disabling the action button to prevent multiple submissions.

• Use clear and simple spinner styles for minimal distraction.

• Consider using timeouts or error-handling logic to hide the spinner on failure.

Oracle APEX Documentation Links

• Using JavaScript in APEX

• Dynamic Actions in Oracle APEX

• Creating Custom UI Interactions

Conclusion

Using JavaScript to create and control a spinner in Oracle APEX gives you flexible, precise control over user feedback during background operations. With just a bit of HTML, CSS, and JavaScript, you can signal progress, prevent confusion, and polish the UI of your application. This approach works well with APEX processes, buttons, and Ajax calls, and enhances your application’s responsiveness with minimal effort.