HOW DO I Use CSS for a Spinner

Using a spinner in Oracle APEX enhances user experience by visually indicating that a process is running or data is loading. While APEX provides built-in loading indicators, customizing a spinner with CSS gives you more control over its appearance and behavior, matching your application’s style. In this blog, you will learn how to create and integrate a CSS-based spinner in your Oracle APEX applications to provide clear feedback during asynchronous operations or page processing.How to Use CSS for a Spinner in Oracle APEX

1. Create the Spinner HTML Element
   Add a container for the spinner in your page where you want it to appear, such as a static region or inside a Dynamic Action. For example:

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

2. Define Spinner Styles with CSS
   Add CSS either in the Inline CSS section of your page, in a Cascading Style Sheet file, or within the page’s Inline CSS property. Here is a simple spinner example:

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

3. Show and Hide the Spinner Using JavaScript or Dynamic Actions
   Use JavaScript or Dynamic Actions to toggle the spinner’s visibility during processing. For example:

   // Show spinner
   document.getElementById('mySpinner').style.display = 'block';
   
   // Hide spinner
   document.getElementById('mySpinner').style.display = 'none';
   

   You can attach this code to events such as button clicks, page submit, or Ajax call starts and ends.

4. Integrate with APEX Processing
   To show the spinner during Ajax requests, use Dynamic Actions on Page Load, Before Submit, or After Refresh to control the spinner’s display, ensuring users get feedback during longer operations.

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>

Best Practices for Using CSS Spinners in APEX

• Keep spinners unobtrusive and sized appropriately for the context.

• Use colors that match your application’s theme for a consistent look.

• Place spinners near the content or button triggering the action for clarity.

• Avoid blocking the entire page unless necessary; partial loading indicators improve usability.

• Test spinner visibility on different devices and browsers.

• Combine spinner display with disabling UI elements to prevent duplicate actions.

 Oracle APEX Documentation Links

• Dynamic Actions and JavaScript

• Customizing Page Styles in APEX

• Using JavaScript in Oracle APEX

Conclusion

Using CSS to create a spinner in Oracle APEX is a simple yet effective way to improve user experience by visually signaling ongoing processes. With a few lines of CSS and JavaScript, you can customize the spinner’s appearance and behavior to fit your application’s design and needs. Proper use of spinners keeps users informed, reduces confusion, and adds polish to your APEX applications.