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
-
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> -
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); } } -
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.
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:
Go to Page Designer
Under Page Attributes, find the CSS section
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
Open Shared Components
Go to Theme Roller
Customize colors, fonts, and styles
Click Save as Style to apply the changes
Option 2: Uploading a CSS File
Navigate to Shared Components > Static Application Files
Click Upload File and upload your .css file
Reference the CSS file in your Page Attributes inside the CSS File URLs section:
#APP_IMAGES#custom-styles.css
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
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;
}
/* 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;
}
/* Spinner Animation */
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
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
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.
