Using Javascript for a spinner in APEX

 In Oracle APEX applications, providing users with clear feedback during long-running operations is essential to ensure a smooth experience. One common approach is to display a spinner to indicate that the application is processing a request. While APEX provides built-in options, using JavaScript gives you more control and flexibility over when and how the spinner appears. By combining a bit of custom HTML, CSS, and JavaScript, you can seamlessly integrate a lightweight spinner that can be shown or hidden based on specific user actions or events within the application.

In Oracle APEX, you can use JavaScript to create and control a spinner to indicate to users that a process is underway, such as during data loading or AJAX calls. This is especially useful when you want more precise control than what is offered by the built-in APEX spinner or Dynamic Actions. Here's how to implement a custom spinner using JavaScript:

1. Add the Spinner HTML to the Page
Go to the Page Designer, and in the HTML Header or in a Static Region, insert the following HTML snippet:

<div id="customSpinner" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:1000;">
  <div class="spinner"></div>
</div>

You can also add a simple CSS spinner style in the Inline CSS section:

.spinner {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. Show or Hide the Spinner Using JavaScript
Use the following JavaScript functions to control visibility:

function showSpinner() {
  document.getElementById('customSpinner').style.display = 'block';
}

function hideSpinner() {
  document.getElementById('customSpinner').style.display = 'none';
}

3. Trigger the Spinner in a Button Click
If you have a button that starts a process (e.g., AJAX call or page submit), add the following call to the "Execute JavaScript Code" step in a Dynamic Action:

showSpinner();

Then, hide the spinner when the process completes using:

hideSpinner();

4. Use It in AJAX Callbacks
If you are running apex.server.process or other asynchronous actions, call showSpinner() before starting the call and hideSpinner() in the .done() or .always() callback.

Example:

showSpinner();
apex.server.process("MY_PROCESS", {
  pageItems: "#P1_ITEM1, #P1_ITEM2"
}, {
  success: function(data) {
    // handle success
  },
  error: function(jqXHR, textStatus, errorThrown) {
    // handle error
  },
  complete: function() {
    hideSpinner();
  }
});

This approach gives you complete control over when the spinner appears and disappears, and allows full customization of the appearance and behavior using your own styles and JavaScript.

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();

Using JavaScript to implement a spinner in Oracle APEX helps developers achieve a more responsive and user-friendly interface without relying solely on built-in components. Whether triggered by a button click, page submission, or AJAX callback, this method keeps users informed and engaged. With minimal code and full styling control, JavaScript-based spinners are a simple yet powerful enhancement to any APEX application.