diff --git a/src/app/app.component.html b/src/app/app.component.html
index 880492fa2975b8f748ef35df6f79251e46233101..4c520d3c73579ff3af67176614e3b778014884b5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -57,6 +57,9 @@
       <mat-icon>add_box</mat-icon>
     </button>
 
+    <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>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 6cf6170efb960b768f974b26cd99fe23ac0220cd..0a4cebf95d8ed94e6641ec5fddc8b1e29110071d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -24,6 +24,13 @@ button:focus {
 #toolbar-bottom-spacer {
     height: 3px;
     background-color: rgb(250, 250, 250);
+    z-index: 190;
+    position: absolute;
+    top: $navbar_height;
+    width: 100%;
+}
+
+#loading-progress-bar {
     z-index: 200;
     position: absolute;
     top: $navbar_height;
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 429eb28ce2fe51c468c4ea2ef74121b211b4999f..ae8842a56344708e1d3f89cf5aba1d823ccc98ce 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, ApplicationRef, OnInit, OnDestroy, HostListener, ViewChild, ComponentRef } from "@angular/core";
-import { Router, Event, NavigationEnd, ActivationEnd } from "@angular/router";
+import { Router, Event, NavigationEnd, ActivationEnd, NavigationStart, NavigationCancel, NavigationError } from "@angular/router";
 import { MatSidenav, MatToolbar, MatDialog, MatIconRegistry } from "@angular/material";
 import { DomSanitizer } from "@angular/platform-browser";
 
@@ -40,6 +40,15 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   /** current calculator, inferred from _currentFormId by setActiveCalc() (used for navbar menu) */
   public currentCalc: any;
 
+  /** 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. Forme des objets :
    * "title": nom du module de calcul
@@ -85,10 +94,15 @@ 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) {
@@ -105,6 +119,10 @@ 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);
+      }
     });
 
     // icônes personnalisées
@@ -184,6 +202,10 @@ 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);
@@ -251,6 +273,11 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     this.errorService.removeObserver(this);
   }
 
+  private showLoading(show: boolean) {
+    this.showProgressBar = show;
+    this.progressBarDeterminate = ! show;
+  }
+
   // interface Observer
 
   update(sender: any, data: any): void {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6b7d73fd1a10da98f2cc0ddb0581b00adf15f79b..6506b6c3a5257818341fca6d2484cd62713af465 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,7 @@ import {
   MatInputModule,
   MatListModule,
   MatCardModule,
+  MatProgressBarModule,
   MatTableModule,
   MatSnackBarModule,
   MatBadgeModule,
@@ -121,6 +122,7 @@ const appRoutes: Routes = [
     MatInputModule,
     MatListModule,
     MatMenuModule,
+    MatProgressBarModule,
     MatSelectModule,
     MatSidenavModule,
     MatSnackBarModule,