Using CSS for a Spinner in APEX

In Oracle APEX, enhancing user experience is a key part of building modern web applications. A common requirement is to indicate background activity—such as data loading or processing—using a spinner or loading animation. While Oracle APEX provides some built-in ways to show activity indicators, you can fully customize the look and feel of your spinner using custom CSS. Adding a CSS-based spinner is simple and effective, and gives your application a polished, professional touch.

Adding a CSS Spinner in Oracle APEX

To implement a CSS-based spinner in APEX, you need to define the HTML structure of the spinner, apply custom CSS styling, and control its visibility using either APEX dynamic actions or JavaScript.

Step-by-Step Guide:

1. Create the Spinner HTML
You can place the spinner HTML in a Static Region, usually on a Global Page (Page 0), so it is available across the application:

Region Type: Static Content
Static ID: mySpinner

<div id="mySpinner" class="custom-spinner" style="display:none;">
  <div class="loader"></div>
</div>

2. Add Custom CSS for the Spinner
Go to Shared Components > CSS > Inline CSS or use Page > CSS > Inline on Page 0.

.custom-spinner {
  position: fixed;
  z-index: 9999;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #007cc2;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

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

3. Show/Hide the Spinner Using JavaScript

To show the spinner during long-running operations, you can use JavaScript or Dynamic Actions.

Using JavaScript:

document.getElementById('mySpinner').style.display = 'flex'; // show
document.getElementById('mySpinner').style.display = 'none'; // hide

You can trigger this via dynamic actions on buttons, AJAX calls, or page processes.

Example: Add a Dynamic Action to Show Spinner on Button Click

1. Create a button (e.g., "Submit")

2. Add a Dynamic Action:

   • Event: Click

   • Selection Type: Button

   • Action: Execute JavaScript Code

   • Code:

document.getElementById('mySpinner').style.display = 'flex';

3. Add another Dynamic Action (if needed) to hide the spinner after a process completes.

4. Optional: Automatically Hide on Page Load

To prevent the spinner from staying visible if the page reloads mid-process, hide it by default using this on Page Load:

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

Extensive Use Case Example

You are submitting a form that takes several seconds due to server processing. When the user clicks "Save", show the spinner immediately:

• Button action: Submit Page

• Add Dynamic Action before submit:

  • Event: Click

  • True Action: Execute JavaScript Code

  • Code:

document.getElementById('mySpinner').style.display = 'flex';

Spinner appears, form is submitted, and when the page reloads, it hides again thanks to Page Load script.

Best Practices

• Use z-index and semi-transparent overlays to ensure the spinner appears above all content.

• Keep spinner minimal for performance.

• Always provide feedback to users during long operations—spinners reduce perceived wait time.

• Consider using APEX’s apex.server.process method for AJAX calls and tie spinner visibility to the success callback.

• Place spinner HTML in Page 0 for global accessibility, but control visibility per page context.

Using CSS to create a spinner in Oracle APEX is a simple and effective way to visually indicate that a process or action is in progress. Spinners enhance user experience by providing feedback during operations like data loading, page submission, or AJAX calls. With a few lines of CSS and optional HTML, you can create elegant and responsive spinners that blend seamlessly into your APEX application's theme. Whether you're customizing the universal theme or building your own template, adding a CSS spinner gives users a clear signal to wait while the system completes a task.

In Oracle APEX, using a CSS spinner is a clean and effective way to indicate that a process—such as a page submission, AJAX call, or dynamic action—is running in the background. You can use pure CSS to create an animated spinner, then show or hide it using APEX dynamic actions or JavaScript.

To begin, you can define the spinner's style by adding CSS to your application's Inline CSS section or a dedicated CSS file. Here's an example of a simple spinner using keyframe animation:

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

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

Next, add the HTML markup where the spinner should appear. This could be inside a region or static content block:

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

To control the spinner's visibility, use Dynamic Actions or JavaScript. For example, to show the spinner before an AJAX call and hide it after completion:

Dynamic Action Example:

• Event: Button Click

• True Action 1: Execute JavaScript Code

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

• True Action 2: Execute PL/SQL or AJAX Callback

• True Action 3 (After PL/SQL/AJAX): Execute JavaScript Code

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

Alternatively, you can define a region as a spinner and use APEX’s built-in classes like u-Processing and u-hidden to manage visibility. But using custom CSS gives you full control over appearance and animation.

Adding a CSS spinner improves user feedback and helps prevent multiple submissions or confusion during long-running processes. This technique is simple but highly effective in creating a professional user interface in Oracle APEX.

Using CSS for a Spinner in APEX

CSS (Cascading Style Sheets) allows you to control the look and feel of your Oracle APEX applications by customizing colors, fonts, layouts, and responsiveness. Oracle APEX provides several ways to apply CSS, either globally or on specific elements.

Ways to Apply CSS in Oracle APEX

1. Inline CSS (Element-Level Styling)

Inline CSS is applied directly to an HTML element using the style attribute.

Example:

To change the color of a button:

<button style="background-color: red; color: white;">Click Me</button>

Use Case: Quick styling for a specific element without affecting others.

2. Page-Level CSS (Inside Page Attributes)

You can apply CSS to a single page by adding styles inside the Inline CSS section of a page.

Steps:

1. Go to Page Designer

2. Under Page Attributes, find the CSS section

3. Add your CSS in Inline CSS

Example:

To change the font size of all headings on a page:

h1, h2, h3 {

    font-size: 20px;

    color: blue;

}

Use Case: Customizing the style of elements on a single page.

3. Theme-Level CSS (Global Styling for the Whole Application)

To apply styles across your entire APEX application, you can add CSS inside the Theme Roller or in Shared Components > CSS Files.

Option 1: Using Theme Roller

1. Open Shared Components

2. Go to Theme Roller

3. Customize colors, fonts, and styles

4. Click Save as Style to apply the changes

Option 2: Uploading a CSS File

1. Navigate to Shared Components > Static Application Files

2. Click Upload File and upload your .css file

3. Reference the CSS file in your Page Attributes inside the CSS File URLs section: 

#APP_IMAGES#custom-styles.css

4. Alternatively, reference the file in Page Header > HTML: 

<link rel="stylesheet" type="text/css" href="#APP_IMAGES#custom-styles.css">

Use Case: Making global design changes to the entire application.

4. Applying CSS to Specific APEX Elements

You can target APEX elements using CSS classes and IDs.

Common APEX CSS Classes:

• t-Button → Styles APEX buttons

• t-Form-input → Styles text fields and inputs

• t-Region → Styles report regions

• apex-item-text → Styles input fields

Example: Styling buttons with a custom color

.t-Button {

    background-color: #0073e6;

    color: white;

    border-radius: 5px;

}

5. Using Dynamic CSS with JavaScript

You can dynamically apply CSS styles using JavaScript.

Example: Change the background color of a button on click

document.getElementById("myButton").style.backgroundColor = "green";

Use Case: Applying real-time CSS changes based on user actions.

Using CSS in Oracle APEX enhances the visual appeal and usability of your applications. You can apply CSS at the element level, page level, or application level using Theme Roller or custom stylesheets. Additionally, JavaScript can be used to apply CSS dynamically.

Adding a Spinner via CSS to an Oracle APEX Page

A spinner (or loading indicator) helps inform users that a process is running in the background. You can add a spinner to your Oracle APEX application using CSS and JavaScript.

Method: Using CSS Only

You can create a simple spinner using pure CSS and display it when needed.

Steps to Add a CSS Spinner

1. Add CSS for the Spinner

• Navigate to Page Designer

• Select your page

• Under Page Attributes, go to Inline CSS

• Add the following CSS:

/* Spinner Container */

.spinner-overlay {

    display: none; /* Hidden by default */

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 9999;

}

2. 
   

/* The Spinner Animation */

.spinner {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 50px;

    height: 50px;

    border: 6px solid #f3f3f3;

    border-top: 6px solid #3498db;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

3. 
   

/* Spinner Animation */

@keyframes spin {

    0% { transform: translate(-50%, -50%) rotate(0deg); }

    100% { transform: translate(-50%, -50%) rotate(360deg); }

}

4. Add the Spinner to the Page

• Navigate to Page Designer

• Go to Regions

• Add a new Static Content region

• Set Static ID to spinnerContainer

• Add the following HTML inside the Region Source:

<div class="spinner-overlay" id="spinnerContainer">

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

</div>

Spinners created with CSS are lightweight, flexible, and easy to control with dynamic actions or JavaScript. By integrating them into your APEX pages, you improve communication with your users and make the application feel more responsive and polished. As with all UI enhancements, testing and consistency across devices are key to delivering a smooth experience.

Oracle APEX Documentation

Refer to the official Oracle APEX documentation for JavaScript integration and page layout:
https://docs.oracle.com/en/database/oracle/apex
Search terms: JavaScript Integration, Dynamic Actions, CSS Customization

Conclusion

Adding a CSS-based spinner in Oracle APEX is a simple way to improve user experience and give your application a modern, responsive feel. By combining custom HTML, CSS, and Dynamic Actions or JavaScript, you can create spinners that activate during long-running processes or AJAX calls. When implemented thoughtfully, this pattern reduces confusion and reassures users that their action is in progress, leading to a smoother interaction with your APEX application.