diff --git a/build/media_source/system/joomla.asset.json b/build/media_source/system/joomla.asset.json
index 1eae307baedf..8e42c188d286 100644
--- a/build/media_source/system/joomla.asset.json
+++ b/build/media_source/system/joomla.asset.json
@@ -624,7 +624,8 @@
       "importmap": true,
       "dependencies": [
         "wcpolyfill",
-        "core"
+        "core",
+        "webcomponent.core-loader"
       ]
     },
     {
diff --git a/build/media_source/system/js/joomla-dialog.w-c.es6.js b/build/media_source/system/js/joomla-dialog.w-c.es6.js
index bd5d547201bf..2d50100c58e5 100644
--- a/build/media_source/system/js/joomla-dialog.w-c.es6.js
+++ b/build/media_source/system/js/joomla-dialog.w-c.es6.js
@@ -312,6 +312,20 @@ class JoomlaDialog extends HTMLElement {
     return this;
   }
 
+  /**
+   * Internal. Create a loader element. This is only used for AJAX and Iframe content
+   * @returns {HTMLElement}
+   */
+  static renderLoader() {
+    const loader = document.createElement('joomla-core-loader');
+    loader.setAttribute('inline', true);
+    loader.setAttribute('size', 60);
+    loader.setAttribute('color', 'transparent');
+    loader.classList.add('mt-5');
+
+    return loader;
+  }
+
   /**
    * Internal. Render the body content, based on popupType.
    * @returns {JoomlaDialog}
@@ -321,8 +335,7 @@ class JoomlaDialog extends HTMLElement {
 
     // Callback for loaded content event listener
     const onLoad = () => {
-      this.classList.add('loaded');
-      this.classList.remove('loading');
+      this.popupTmplB.removeChild(this.querySelector('joomla-core-loader'));
       this.popupContentElement.removeEventListener('load', onLoad);
       this.dispatchEvent(new CustomEvent('joomla-dialog:load'));
 
@@ -335,8 +348,6 @@ class JoomlaDialog extends HTMLElement {
       }
     };
 
-    this.classList.add('loading');
-
     switch (this.popupType) {
       // Create an Inline content
       case 'inline': {
@@ -371,6 +382,9 @@ class JoomlaDialog extends HTMLElement {
 
       // Create an IFrame content
       case 'iframe': {
+        // Append the loader
+        this.popupTmplB.appendChild(this.constructor.renderLoader());
+
         const frame = document.createElement('iframe');
         frame.addEventListener('load', onLoad);
         frame.src = this.src;
@@ -399,6 +413,9 @@ class JoomlaDialog extends HTMLElement {
 
       // Create an AJAX content
       case 'ajax': {
+        // Append the loader
+        this.popupTmplB.appendChild(this.constructor.renderLoader());
+
         fetch(this.src)
           .then((response) => {
             if (response.status !== 200) {
diff --git a/build/media_source/templates/site/cassiopeia/scss/blocks/_modals.scss b/build/media_source/templates/site/cassiopeia/scss/blocks/_modals.scss
index c4a36b3af981..b1b3dfdd25b8 100644
--- a/build/media_source/templates/site/cassiopeia/scss/blocks/_modals.scss
+++ b/build/media_source/templates/site/cassiopeia/scss/blocks/_modals.scss
@@ -72,24 +72,6 @@ joomla-dialog {
     width: 100%;
     height: 100%;
   }
-
-  // Extra loading animation for iframe and ajax types
-  &[type="iframe"],
-  &[type="ajax"] {
-    &.loading {
-      dialog:after {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: block;
-        width: 66px;
-        height: 66px;
-        content: "";
-        background: url("../../../../system/images/ajax-loader.gif") no-repeat center;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
 }
 // Dialog animation
 joomla-dialog dialog[open] {
@@ -167,15 +149,6 @@ joomla-dialog dialog[open] {
   joomla-dialog[type="ajax"] & {
     overflow: auto;
   }
-
-  // Content basic loading animation
-  joomla-dialog.loading & {
-    opacity: 0;
-  }
-  joomla-dialog.loaded & {
-    opacity: 1;
-    transition: opacity .4s ease;
-  }
 }
 .joomla-dialog-footer {
   position: relative;