diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
index 29463e45c6b..882ae93824e 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-component.scss
@@ -464,6 +464,10 @@
             @extend %igx-grid__outlet !optional;
         }
 
+        @include e(loading-outlet) {
+            @extend %igx-grid__loading-outlet !optional;
+        }
+
         @include e(addrow-snackbar) {
             @extend %igx-grid__addrow-snackbar !optional;
         }
diff --git a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
index 2295bc01c7a..49f7c929c34 100644
--- a/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss
@@ -2374,6 +2374,12 @@
         --ig-size: var(--grid-size);
     }
 
+    %igx-grid__loading-outlet {
+        %overlay-wrapper--modal {
+            background: none;
+        }
+    }
+
     %igx-grid__addrow-snackbar {
         position: absolute;
         z-index: 5;
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
index 058e9f9c040..218e0cba312 100644
--- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
+++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
@@ -129,10 +129,12 @@
             <igc-trial-watermark></igc-trial-watermark>
         }
     </div>
-    <div igxToggle #loadingOverlay>
-        @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
-        }
+    <div class="igx-grid__loading-outlet">
+        <div igxToggle #loadingOverlay>
+            @if (shouldOverlayLoading) {
+                <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+            }
+        </div>
     </div>
     @if (moving && columnInDrag) {
         <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
index 34c19e6198d..69dbf5ec03a 100644
--- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
@@ -63,10 +63,12 @@
         <ng-container #bodyViewContainerRef></ng-container>
         <igc-trial-watermark></igc-trial-watermark>
     </div>
-    <div igxToggle #loadingOverlay>
-        @if (shouldOverlayLoading) {
-            <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
-        }
+    <div class="igx-grid__loading-outlet">
+        <div igxToggle #loadingOverlay>
+            @if (shouldOverlayLoading) {
+                <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+            }
+        </div>
     </div>
     @if (hasMovableColumns && columnInDrag) {
         <span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
index 69fecf903c5..d55a1cceba6 100644
--- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
+++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
@@ -330,10 +330,12 @@
     <ng-container #bodyViewContainerRef></ng-container>
     <igc-trial-watermark></igc-trial-watermark>
   </div>
-  <div igxToggle #loadingOverlay>
-    @if (shouldOverlayLoading) {
-      <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
-    }
+  <div class="igx-grid__loading-outlet">
+    <div igxToggle #loadingOverlay>
+        @if (shouldOverlayLoading) {
+        <igx-circular-bar [indeterminate]="true"></igx-circular-bar>
+        }
+    </div>
   </div>
   @if (moving && columnInDrag) {
     <span