Using CSS for a Spinner in APEX

 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.