diff --git a/samples/indoor-directions-service/index.njk b/samples/indoor-directions-service/index.njk
index c269f591..d261b50e 100644
--- a/samples/indoor-directions-service/index.njk
+++ b/samples/indoor-directions-service/index.njk
@@ -2,7 +2,9 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div class="progress"></div>
+        <div class="progress">
+            <div class="spinner"></div>
+        </div>
         <!--The div element for the map -->
         <div id="map"></div>
     </div>
diff --git a/samples/indoor-directions-service/style.scss b/samples/indoor-directions-service/style.scss
index f0cc5fed..be02b5f3 100644
--- a/samples/indoor-directions-service/style.scss
+++ b/samples/indoor-directions-service/style.scss
@@ -9,7 +9,7 @@
 }
 
 .progress {
-  @include progress($top: 0);
+  @include progress();
 }
 
 /* [END woosmap_indoor_directions_service] */
diff --git a/samples/indoor-map-advanced/index.njk b/samples/indoor-map-advanced/index.njk
index c269f591..d261b50e 100644
--- a/samples/indoor-map-advanced/index.njk
+++ b/samples/indoor-map-advanced/index.njk
@@ -2,7 +2,9 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div class="progress"></div>
+        <div class="progress">
+            <div class="spinner"></div>
+        </div>
         <!--The div element for the map -->
         <div id="map"></div>
     </div>
diff --git a/samples/indoor-map-advanced/style.scss b/samples/indoor-map-advanced/style.scss
index 1eca2dfa..42d1cb8a 100644
--- a/samples/indoor-map-advanced/style.scss
+++ b/samples/indoor-map-advanced/style.scss
@@ -9,7 +9,7 @@
 }
 
 .progress {
-  @include progress($top: 0);
+  @include progress();
 }
 
 /* [END woosmap_indoor_map_advanced] */
diff --git a/samples/indoor-map-simple/index.njk b/samples/indoor-map-simple/index.njk
index c269f591..d261b50e 100644
--- a/samples/indoor-map-simple/index.njk
+++ b/samples/indoor-map-simple/index.njk
@@ -2,7 +2,9 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div class="progress"></div>
+        <div class="progress">
+            <div class="spinner"></div>
+        </div>
         <!--The div element for the map -->
         <div id="map"></div>
     </div>
diff --git a/samples/indoor-map-simple/style.scss b/samples/indoor-map-simple/style.scss
index 8fcfd6cb..1e33bc44 100644
--- a/samples/indoor-map-simple/style.scss
+++ b/samples/indoor-map-simple/style.scss
@@ -9,7 +9,7 @@
 }
 
 .progress {
-  @include progress($top: 0);
+  @include progress();
 }
 
 /* [END woosmap_indoor_map_simple] */
diff --git a/samples/indoor-navigation-widget/index.njk b/samples/indoor-navigation-widget/index.njk
index c269f591..d261b50e 100644
--- a/samples/indoor-navigation-widget/index.njk
+++ b/samples/indoor-navigation-widget/index.njk
@@ -2,7 +2,9 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div class="progress"></div>
+        <div class="progress">
+            <div class="spinner"></div>
+        </div>
         <!--The div element for the map -->
         <div id="map"></div>
     </div>
diff --git a/samples/indoor-navigation-widget/style.scss b/samples/indoor-navigation-widget/style.scss
index 0afe1e53..50c5b20f 100644
--- a/samples/indoor-navigation-widget/style.scss
+++ b/samples/indoor-navigation-widget/style.scss
@@ -9,7 +9,7 @@
 }
 
 .progress {
-  @include progress($top: 0);
+  @include progress();
 }
 
 /* [END woosmap_indoor_navigation_widget] */
diff --git a/samples/indoor-widget-advanced/index.njk b/samples/indoor-widget-advanced/index.njk
index c269f591..d261b50e 100644
--- a/samples/indoor-widget-advanced/index.njk
+++ b/samples/indoor-widget-advanced/index.njk
@@ -2,7 +2,9 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div class="progress"></div>
+        <div class="progress">
+            <div class="spinner"></div>
+        </div>
         <!--The div element for the map -->
         <div id="map"></div>
     </div>
diff --git a/samples/indoor-widget-advanced/style.scss b/samples/indoor-widget-advanced/style.scss
index f07965f6..545701fc 100644
--- a/samples/indoor-widget-advanced/style.scss
+++ b/samples/indoor-widget-advanced/style.scss
@@ -9,7 +9,7 @@
 }
 
 .progress {
-  @include progress($top: 0);
+  @include progress();
 }
 
 /* [END woosmap_indoor_widget_advanced] */
diff --git a/samples/indoor-widget-simple/index.njk b/samples/indoor-widget-simple/index.njk
index c269f591..d261b50e 100644
--- a/samples/indoor-widget-simple/index.njk
+++ b/samples/indoor-widget-simple/index.njk
@@ -2,7 +2,9 @@
 {% block html %}
     <!-- [START woosmap_{{ tag }}_div] -->
     <div id="app">
-        <div class="progress"></div>
+        <div class="progress">
+            <div class="spinner"></div>
+        </div>
         <!--The div element for the map -->
         <div id="map"></div>
     </div>
diff --git a/samples/indoor-widget-simple/style.scss b/samples/indoor-widget-simple/style.scss
index 4778ea61..b9453f9b 100644
--- a/samples/indoor-widget-simple/style.scss
+++ b/samples/indoor-widget-simple/style.scss
@@ -9,7 +9,7 @@
 }
 
 .progress {
-  @include progress($top: 0);
+  @include progress();
 }
 
 /* [END woosmap_indoor_widget_simple] */
diff --git a/shared/scss/_mixins.scss b/shared/scss/_mixins.scss
index 1671472c..d3469b36 100644
--- a/shared/scss/_mixins.scss
+++ b/shared/scss/_mixins.scss
@@ -65,33 +65,25 @@
   }
 }
 
-@mixin progress($height:3px, $top: null, $bottom: null) {
-  position: absolute;
-  top: $top;
-  bottom: $bottom;
-  height: $height;
-  z-index: 1;
-  background-color: #3D5AFE;
-  animation: progress 2s infinite;
-
-
-  @keyframes progress {
-    0% {
-      width: 0;
-      left: 0;
-    }
-    50% {
-      width: 100%;
-      left: 0;
-    }
-    75% {
-      width: 0;
-      left: 100%;
-    }
-    100% {
-      width: 0;
-      left: 100%;
-    }
+@mixin progress($width: 70px, $height:70px, $borderColor: #f3f3f3, $borderTopColor: #444444) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+
+  .spinner {
+    border: 10px solid $borderColor;
+    border-top: 10px solid $borderTopColor;
+    border-radius: 50%;
+    width: $width;
+    height: $height;
+    animation: spin 1s linear infinite;
   }
 }