diff --git a/www/css/app.css b/www/css/app.css
index cd8627be5..28fffd4dd 100644
--- a/www/css/app.css
+++ b/www/css/app.css
@@ -83,6 +83,16 @@
     color : orange;
 }
 
+#centeredspinner{
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    top: 50%;
+    left: 50%;
+    margin-left: -50px;
+    margin-top: -50px;
+}
+
 /* Réduction de la taille des éléments en haut pour les petits écrans */
 @media (max-width: 768px) {
     /* Pour réduire la taille du menu en haut */
diff --git a/www/img/big-spinner.gif b/www/img/big-spinner.gif
new file mode 100644
index 000000000..0ca7ada96
Binary files /dev/null and b/www/img/big-spinner.gif differ
diff --git a/www/index.html b/www/index.html
index 8b408f213..36d7f8cfa 100644
--- a/www/index.html
+++ b/www/index.html
@@ -241,6 +241,9 @@ <h2>Configuration</h2>
                 </div>
                 <div id="geolocationProgress" style="display: none;" class="container">
                 </div>
+                <div id="centeredspinner" style="display:none;">
+                    <img src="img/big-spinner.gif" alt="Please wait..."/>
+                </div>
                 <iframe id="articleContent" src="A/dummyArticle.html" class="articleIFrame">&nbsp;</iframe>
             </article>
             <footer>
diff --git a/www/js/app.js b/www/js/app.js
index fcc7aca84..e8439f921 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -254,11 +254,33 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
         $('#searchingForTitles').hide();
         return false;
     });
-    $('input:radio[name=contentInjectionMode]').on('change', function(e) {
+    $('input:radio[name=contentInjectionMode]').on('change', function(event) {
         // Do the necessary to enable or disable the Service Worker
         setContentInjectionMode(this.value);
         checkSelectedArchiveCompatibilityWithInjectionMode();
     });
+    $('#articleContent').on('load',onIFrameLoad);
+    function onIFrameLoad() {
+        $('#centeredspinner').hide();
+        $('#articleContent').contents().on('click', function (event) {
+            if (contentInjectionMode === 'serviceworker') {
+                // In Service Worker mode, we want to display a spinner
+                // when the user clicks on a link
+                // We only do that when the click is somewhere inside a <a> tag
+                // that has a href attribute
+                if ($(event.target).is('a[href!=""] *,a[href!=""]')) {
+                    // And we don't want to show the spinner when clicking on an anchor
+                    if ($(event.target).is('a:not([href^="#"]) *,a:not([href^="#"])')) {
+                        $('#articleContent').contents().find('body').fadeTo('fast',0.2);
+                        $('#centeredspinner').show();
+                    }
+                }
+            }
+
+        });
+    }
+    // Add the event for first use
+    onIFrameLoad();
     
     /**
      * Displays of refreshes the API status shown to the user
@@ -1030,7 +1052,7 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
                 }
             });
 
-        }  
+        }
     }
 
     /**