How do I Using Dynamic Actions for a Spinner In APEX

 In Oracle APEX, providing users with visual feedback during long-running operations is essential for a smooth user experience. One effective method is to use a spinner animation to indicate that a process is in progress. By combining a simple CSS-based spinner with Dynamic Actions, you can show and hide the spinner precisely when needed—such as before a PL/SQL process begins and after it completes. This approach helps prevent multiple submissions, reduces user confusion, and adds a professional touch to your application.

In Oracle APEX, using a spinner through Dynamic Actions is a great way to give users feedback while a process is running. This is useful when you want to show a loading animation during operations such as submitting a form, invoking a PL/SQL process, or refreshing a region. You can control when the spinner appears and disappears using simple Dynamic Action events and CSS.

To implement a spinner in APEX using Dynamic Actions, follow these steps:

1. Create a Spinner Region:
   Go to the Page Designer. Add a new Static Content region at the top of your page. In the region's HTML, add this spinner markup:

   <div id="mySpinner" style="display:none;">
     <div class="spinner" style="margin:auto;"></div>
   </div>
   

   Then add this CSS in Inline CSS (under Page > CSS > Inline):

   .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. Create a Dynamic Action to Show the Spinner:
   Select the button (e.g., a Submit button).
   Under Dynamic Actions, create a new Dynamic Action:

   • Name: Show Spinner

   • Event: Click

   • Selection Type: Button

   • Button: Select your button

   • Action: Execute JavaScript Code

   • Code:

     $('#mySpinner').show();
     

3. Hide the Spinner After Process Completion:
   To automatically hide the spinner when the process finishes, create another Dynamic Action:

   • Event: After Refresh, After Submit, or use Page Load if using AJAX

   • Action: Execute JavaScript Code

   • Code:

     $('#mySpinner').hide();
     

4. Optional – Add Delay:
   If needed, you can add a delay or timeout before hiding the spinner, using:

   setTimeout(function(){
     $('#mySpinner').hide();
   }, 3000); // hides after 3 seconds
   

This approach allows you to control visual indicators precisely when needed, improving user experience by signaling that something is happening behind the scenes. The spinner is simple, reusable, and easy to customize for color, size, and position.

Adding a Spinner via Dynamic Actions in Oracle APEX

A spinner (loading indicator) can be added to an Oracle APEX page using Dynamic Actions. This allows you to display the spinner when an action (like a button click or page load) occurs and hide it when the action completes.

Steps to Add a Spinner Using Dynamic Actions

1. Add a Spinner to Your 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 Dynamic Actions to Show and Hide the Spinner

Dynamic Action 1: Show Spinner on Button Click

1. Select the Button that triggers the action (e.g., "Submit").

2. In Dynamic Actions, click Create and set:

• Event: Click

• Selection Type: Button

• Button: Choose the button (e.g., "Submit")

3. Under True Actions, click Add Action and select Execute JavaScript Code.

4. Add this JavaScript code:

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

6. Click OK and save changes.

Dynamic Action 2: Hide Spinner After Process Completion

1. In Dynamic Actions, create a new action.

2. Set:

• Event: Custom Event

• Custom Event Name: apexafterclosedialog (or any custom event your process triggers)

• Selection Type: JavaScript Expression

• JavaScript Expression: document

3. Under True Actions, click Add Action and select Execute JavaScript Code.

4. Add this JavaScript code:

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

6. Click OK and save changes.

Now, whenever the button is clicked, the spinner will appear. Once the process completes (or when the page refreshes), the spinner will disappear. This method improves the user experience by visually indicating that the system is processing a request.

Option 2 EXAMPLE- Using Dynamic Actions

Two Dynamic Actions are provided with the theme.

• Material APEX - Show Spinner has 3 settings:

• Affected Element: Where the spinner will be. If empty, the spinner will be on the body element.

• Size: Big or small. If empty, the spinner will have a standard size.

• Color: Red, Blue, Yellow, Green. If empty, the spinner will circle these four colors.

• Material APEX - Remove Spinners removes all active spinners from the page.

Using Dynamic Actions to control a spinner gives you full control without writing complex code. With just a few clicks in the APEX builder, you can define when the spinner appears and disappears. Whether you're submitting a page, calling a web service, or running a background process, a well-timed spinner enhances user interaction and communicates progress clearly.