How Do I Use Dynamic Actions for a Spinner in ORACLE APEX

In Oracle APEX, Dynamic Actions provide a powerful way to add interactivity without writing custom JavaScript. One common use case is to show a spinner during a long-running process to give users visual feedback. Instead of building a full JavaScript handler, you can leverage Dynamic Actions to control when the spinner appears and disappears. This method is ideal for buttons that trigger Ajax calls, PL/SQL processes, or region refreshes. In this blog post, you'll learn how to use Dynamic Actions to control a CSS-based spinner in Oracle APEX.How to Use Dynamic Actions to Show a Spinner in Oracle APEX

1. Create a Spinner Element on the Page
   Add a static region with a DIV that will serve as your spinner:

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

   Define the spinner's styling in your page’s Inline CSS:

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

2. Add a Button That Triggers a Process
   Create a button on the page that will initiate a PL/SQL or Ajax process.

3. Create a Dynamic Action to Show the Spinner

   • Event: Click

   • Selection Type: Button

   • Button: Choose your button

   • True Action: Execute JavaScript Code

     document.getElementById('spinner').style.display = 'block';
     

4. Add the Main Process (e.g., PL/SQL or Refresh)
   Create a second True Action in the same Dynamic Action:

   • Action: Execute PL/SQL Code or Refresh Region (depending on your need)

   • Set Wait for Result to Yes

5. Add a Final Action to Hide the Spinner
   Add a third True Action:

   • Action: Execute JavaScript Code

     document.getElementById('spinner').style.display = 'none';
     

   • Fire On Page Load: No

   • Wait For Result: Yes (important to delay hiding until processing is done)

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.

Best Practices for Using Spinners with Dynamic Actions

• Use unique IDs or classes for your spinner element to avoid conflicts.

• Keep spinners small and centered near the action that triggered them.

• Use Wait for Result = Yes on all actions that take time.

• Avoid hiding the spinner too early—always wait until the process finishes.

• Hide the spinner in case of errors by adding an Error Dynamic Action.

• Combine with disabling the button or form elements to avoid double-clicks.

Oracle APEX Documentation Links

• Using Dynamic Actions

• JavaScript Integration in APEX

• Page Design and Interaction

Conclusion

Using Dynamic Actions to control a spinner in Oracle APEX is a clean and low-code way to provide users with visual feedback during background processes. With just a few steps—adding HTML, CSS, and JavaScript through Dynamic Actions—you can improve the responsiveness and professionalism of your applications. This method avoids custom scripting and fits naturally into the APEX development model, making your UI more intuitive and user-friendly.