diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
index 5f2e922263..47ff4d057d 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts
@@ -24,14 +24,22 @@ import { filter } from 'rxjs/operators';
   styleUrls: ['./loader-bar.component.scss'],
 })
 export class LoaderBarComponent implements OnDestroy, OnInit {
+  protected _isLoading: boolean;
+
   @Input()
-  containerClass = 'abp-loader-bar';
+  set isLoading(value: boolean) {
+    this._isLoading = value;
+    this.cdRef.detectChanges();
+  }
+  get isLoading(): boolean {
+    return this._isLoading;
+  }
 
   @Input()
-  color = '#77b6ff';
+  containerClass = 'abp-loader-bar';
 
   @Input()
-  isLoading: boolean;
+  color = '#77b6ff';
 
   progressLevel = 0;
 
@@ -122,7 +130,7 @@ export class LoaderBarComponent implements OnDestroy, OnInit {
     if (this.interval) this.interval.unsubscribe();
 
     this.progressLevel = 100;
-    setTimeout(() => (this.isLoading = false), 0);
+    this.isLoading = false;
 
     if (this.timer && !this.timer.closed) return;