diff --git a/CHANGELOG.md b/CHANGELOG.md
index cea8b6eb6d7..b0036a54635 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.2.0
+
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
+
 ## 10.1.0
 
 ### General
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss
index d2f87afc3cc..7fe92626415 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss
@@ -23,6 +23,10 @@
         @extend %igx-grid-toolbar__actions !optional;
     }
 
+    @include e(progress-bar){
+        @extend %igx-grid-toolbar__progress-bar !optional;
+    }
+
     @include e(adv-filter, $m: 'filtered') {
         @extend %igx-grid-toolbar__adv-filter--filtered !optional;
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index 57efb77b016..562a0e0933d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -141,6 +141,7 @@
         border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300);
         background: --var($theme, 'background-color');
         height: map-get($grid-toolbar-height, 'comfortable');
+        position: relative;
 
         @include if-ltr(){
             padding: map-get($grid-toolbar-padding, 'comfortable');
@@ -253,6 +254,21 @@
         }
     }
 
+    %igx-grid-toolbar__progress-bar {
+        position: absolute;
+        width: 100%;
+        left: 0;
+        right: 0;
+        bottom: rem(-1px);
+        height: rem(2px);
+        overflow: hidden;
+        background: --var($theme, 'background-color');
+
+        igx-linear-bar > * {
+            border-radius: 0;
+        }
+    }
+
     %igx-grid-toolbar__adv-filter--filtered {
         border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
 
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
index 8e433821242..da0fecd8822 100644
--- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
+++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
@@ -41,6 +41,7 @@
             </igx-column-actions>
         </igx-drop-down>
     </div>
+
     <div *ngIf="grid.columnPinning">
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
             (click)="toggleColumnPinningUI()">
@@ -65,7 +66,7 @@
 
     <div class="igx-grid-toolbar__dropdown" *ngIf="shouldShowExportButton" id="btnExport">
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btnExport
-                (click)="exportClicked()">
+                (click)="exportClicked()" [disabled]="isExporting">
             <span class="igx-grid-toolbar__button-space">
                 <igx-icon fontSet="material">import_export</igx-icon>
                 <span>{{ getExportText() }}</span>
@@ -83,3 +84,7 @@
         </igx-drop-down>
     </div>
 </div>
+
+<div class="igx-grid-toolbar__progress-bar" *ngIf="isExporting">
+    <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
+</div>
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
index 56a836ed171..18a89a6b570 100644
--- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -24,8 +24,6 @@ import { GridBaseAPIService } from '../api.service';
 import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxDropDownComponent } from '../../drop-down/drop-down.component';
-import { IgxColumnHidingComponent } from '../hiding/column-hiding.component';
-import { IgxColumnPinningComponent } from '../pinning/column-pinning.component';
 import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../../services/overlay/utilities';
 import { ConnectedPositioningStrategy } from '../../services/overlay/position';
 import { GridType } from '../common/grid.interface';
@@ -35,6 +33,8 @@ import { GridIconsFeature } from '../common/enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
 import { IgxColumnHidingDirective } from '../column-actions/column-hiding.directive';
 import { IgxColumnPinningDirective } from '../column-actions/column-pinning.directive';
+import { Subscription } from 'rxjs';
+import { first } from 'rxjs/operators';
 
 /**
  * This class encapsulates the Toolbar's logic and is internally used by
@@ -74,6 +74,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
     }
 
     private _filterColumnsPrompt = this.grid.resourceStrings.igx_grid_toolbar_actions_filter_prompt;
+    private _isExporting = false;
 
     /**
      * @hidden
@@ -186,6 +187,13 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         return (this.grid != null && (this.grid.exportExcel || this.grid.exportCsv));
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get isExporting(): boolean {
+        return this._isExporting;
+    }
+
     /**
      * Returns whether the `IgxGridComponent` renders an Excel export button.
      * ```typescript
@@ -328,6 +336,11 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         this.performExport(this.csvExporter, 'csv');
     }
 
+    private setIsExporting(isExporting: boolean) {
+        this._isExporting = isExporting;
+        this.cdr.detectChanges();
+    }
+
     private performExport(exp: IgxBaseExporter, exportType: string) {
         this.exportClicked();
 
@@ -335,13 +348,25 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         const options = exportType === 'excel' ?
             new IgxExcelExporterOptions(fileName) :
             new IgxCsvExporterOptions(fileName, CsvFileTypes.CSV);
-
         const args = { grid: this.grid, exporter: exp, options: options, cancel: false };
 
         this.grid.onToolbarExporting.emit(args);
         if (args.cancel) {
             return;
         }
+
+        let exportEnded = false;
+        setTimeout(() => {
+            if (!exportEnded) {
+                this.setIsExporting(true);
+            }
+        }, 500);
+
+        exp.onExportEnded.pipe(first()).subscribe(() => {
+            exportEnded = true;
+            this.setIsExporting(false);
+        });
+
         exp.export(this.grid, options);
     }
 
diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
index ec750d09dc5..0506c6ca29d 100644
--- a/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
+++ b/projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts
@@ -77,6 +77,8 @@ export abstract class IgxBaseExporter {
     protected _indexOfLastPinnedColumn = -1;
     protected _sort = null;
 
+    public onExportEnded = new EventEmitter<IBaseEventArgs>();
+
     /**
      * This event is emitted when a row is exported.
      * ```typescript
@@ -213,7 +215,7 @@ export abstract class IgxBaseExporter {
         const dataToExport = new Array<any>();
         const isSpecialData = ExportUtilities.isSpecialData(data);
 
-        yieldingLoop(data.length, 1000, (i) => {
+        yieldingLoop(data.length, 100, (i) => {
             const row = data[i];
             this.exportRow(dataToExport, row, i, isSpecialData);
         }, () => {