diff --git a/src/app/app.component.html b/src/app/app.component.html
index ada2c37dd155fbdc80add28251d9583a6a4332d6..1ae0012dfab3d4f15e9d5c127459075397c4968e 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -65,13 +65,16 @@
       [title]="uitextSidenavHelp" (click)="sidenav.close()">
       <mat-icon>help</mat-icon>
     </a>
+    <span style="color: white; font-weight: bold; font-size: 2em; margin-right: 50px;">{{ progressBarValue }}</span>
 
-    <mat-progress-bar *ngIf="showProgressBar" color="accent" id="loading-progress-bar"
-      [mode]="progressBarMode" [value]="progessBarValue">
-    </mat-progress-bar>
     <div id="toolbar-bottom-spacer"></div>
+
   </mat-toolbar>
 
+  <div id="loading-progress-bar" *ngIf="showProgressBar">
+    <div id="progress-slider"></div>
+  </div>
+
 </header>
 
 <main>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 5573c4aea42eacc0f66178d50c0cd99ba48a0a7a..ae416e96d8c9395d61cfbea49656b5d05e4f3f8d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -4,6 +4,8 @@ $navbar_height: 54px; // @TODO not really generic
 
 // rules
 
+@import "../theme.scss";
+
 .dropdown-menu > li > a:hover {
     background-color: rgb(172, 172, 172);
     background-image: none;
@@ -31,10 +33,24 @@ button:focus {
 }
 
 #loading-progress-bar {
-    z-index: 200;
-    position: absolute;
+    position: fixed;
     top: $navbar_height;
+    z-index: 200;
     width: 100%;
+    height: 4px;
+    background-color:#fafafa;
+
+    #progress-slider {
+        width: 25%;
+        height: 4px;
+        background-color: mat-color($accent);
+        animation: 2s scroll linear infinite;
+    }
+}
+
+@keyframes scroll {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(400%); }
 }
 
 #open-menu {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e8686b733a50d10686f5868e04f5c7e1da95c55a..3a6e7f6b676718509caab45313aaf36e478dad99 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, HostListener, ViewChild } from "@angular/core";
-import { Router, Event, NavigationEnd, ActivationEnd, NavigationStart, NavigationCancel, NavigationError } from "@angular/router";
+import { Router, Event, NavigationEnd, ActivationEnd } from "@angular/router";
 import { MatDialog } from "@angular/material/dialog";
 import { MatSidenav } from "@angular/material/sidenav";
 import { MatToolbar } from "@angular/material/toolbar";
@@ -48,12 +48,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   /** shows or hides the progressbar under the navbar */
   public showProgressBar = false;
 
-  /** if true, progress bar will be in "determinate" mode, else in "indeterminate" mode */
-  public progressBarDeterminate = true;
-
-  /** progress bar percentage, for "determinate" mode */
-  public progessBarValue = 0;
-
   /** liste des modules de calcul ouverts */
   private _calculators: Array<{
     title: string,
@@ -93,15 +87,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     ServiceFactory.instance.notificationsService = notificationsService;
 
     this.router.events.subscribe((event: Event) => {
-      // show loading bar when changing route
-      if (event instanceof NavigationStart) {
-        this.showLoading(true);
-      }
       // close side navigation when clicking a calculator tab
       if (event instanceof NavigationEnd) {
         this.sidenav.close();
         window.scrollTo(0, 0);
-        this.showLoading(false);
       }
       // [de]activate calc tabs depending on loaded route
       if (event instanceof ActivationEnd) {
@@ -118,10 +107,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
           this.setActiveCalc(null);
         }
       }
-      // hide loading bar on routing errors
-      if (event instanceof NavigationCancel || event instanceof NavigationError) {
-        this.showLoading(false);
-      }
     });
 
     // hotkeys listeners
@@ -225,10 +210,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     return this.router.url;
   }
 
-  public get progressBarMode() {
-    return this.progressBarDeterminate ? "determinate" : "indeterminate";
-  }
-
   public setActiveCalc(uid: string) {
     this._calculators.forEach((calc) => {
       calc.active = (calc.uid === uid);
@@ -296,11 +277,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     this.errorService.removeObserver(this);
   }
 
-  private showLoading(show: boolean) {
-    this.showProgressBar = show;
-    this.progressBarDeterminate = ! show;
-  }
-
   public get enableHeaderDoc(): boolean {
     return this.currentRoute === "/list" && this._calculators.length === 0;
   }
diff --git a/src/app/components/generic-calculator/calculator.component.ts b/src/app/components/generic-calculator/calculator.component.ts
index f655bd60f4a0b8a1e8b0fa6ecdee99114f39663a..a7034fa79c76ac93b4e120779b47b69a7151d0f9 100644
--- a/src/app/components/generic-calculator/calculator.component.ts
+++ b/src/app/components/generic-calculator/calculator.component.ts
@@ -295,8 +295,12 @@ export class GenericCalculatorComponent implements OnInit, DoCheck, AfterViewChe
     }
 
     public doCompute() {
-        this._formulaire.doCompute();
+        this.appComponent.showProgressBar = true;
         this._computeClicked = true;
+        setTimeout(() => {
+            this._formulaire.doCompute();
+            this.appComponent.showProgressBar = false;
+        }, 100); // 100ms is important, a lower value may make the progress bar never appear :/
     }
 
     public onCalcResultsViewChecked() {
diff --git a/src/app/formulaire/definition/form-definition.ts b/src/app/formulaire/definition/form-definition.ts
index 41094efef5da07b84fb98073a34d9b35891a653b..b178d3a3db9ca3098f58050f2ffb1223d05d484f 100644
--- a/src/app/formulaire/definition/form-definition.ts
+++ b/src/app/formulaire/definition/form-definition.ts
@@ -363,6 +363,14 @@ export abstract class FormulaireDefinition extends FormulaireNode implements Obs
         }, sender);
     }
 
+    /**
+     * Forwards Nub's progress updated notification.
+     * Used by CalculatorComponent to update progress bar
+     */
+    protected notifyNubProgressUpdated(sender: any, data: any) {
+        this.notifyObservers(data, sender);
+    }
+
     /**
      * réinitialisation du formulaire suite à un changement d'une valeur, d'une option, ... :
      * effacement des résultats, application des dépendances, ...