diff --git a/lib/app/views/loading/chasing-dots.html b/lib/app/views/loading/chasing-dots.html
index 7b9db40240..174ab14593 100644
--- a/lib/app/views/loading/chasing-dots.html
+++ b/lib/app/views/loading/chasing-dots.html
@@ -65,4 +65,4 @@ body, html, #__nuxt {
   <div class="dot2"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/circle.html b/lib/app/views/loading/circle.html
index d03338274e..45dfb0ea7a 100644
--- a/lib/app/views/loading/circle.html
+++ b/lib/app/views/loading/circle.html
@@ -148,4 +148,4 @@ body, html, #__nuxt {
   <div class="sk-circle12 sk-child"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/cube-grid.html b/lib/app/views/loading/cube-grid.html
index b8c4d754b8..2343511cbc 100644
--- a/lib/app/views/loading/cube-grid.html
+++ b/lib/app/views/loading/cube-grid.html
@@ -85,4 +85,4 @@ body, html, #__nuxt {
   <div class="sk-cube sk-cube9"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/default.html b/lib/app/views/loading/default.html
new file mode 100644
index 0000000000..804c7af0b0
--- /dev/null
+++ b/lib/app/views/loading/default.html
@@ -0,0 +1,59 @@
+<style>
+body, html, #__nuxt {
+  background-color: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.loader,
+.loader:after {
+  border-radius: 50%;
+  width: 5rem;
+  height: 5rem;
+}
+
+.loader {
+  margin: 60px auto;
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border: .5rem solid <%= options.color2 %>;
+  border-left: .5rem solid <%= options.color %>;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style>
+
+<div class="loader"><%= options.loading %></div>
+
+<%= options.dev ? '<!-- https://projects.lukehaas.me/css-loaders -->' : '' %>
diff --git a/lib/app/views/loading/default2.html b/lib/app/views/loading/default2.html
new file mode 100644
index 0000000000..01f8de1246
--- /dev/null
+++ b/lib/app/views/loading/default2.html
@@ -0,0 +1,84 @@
+<style>
+body, html, #__nuxt {
+  background-color: <%= options.background %>;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+}
+.loader {
+  color: <%= options.color %>;
+  font-size: 11px;
+  text-indent: -99999em;
+  margin: 55px auto;
+  position: relative;
+  width: 10em;
+  height: 10em;
+  box-shadow: inset 0 0 0 1em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+.loader:before,
+.loader:after {
+  position: absolute;
+  content: '';
+}
+.loader:before {
+  width: 5.2em;
+  height: 10.2em;
+  background-color: <%= options.background %>;
+  border-radius: 10.2em 0 0 10.2em;
+  top: -0.1em;
+  left: -0.1em;
+  -webkit-transform-origin: 5.2em 5.1em;
+  transform-origin: 5.2em 5.1em;
+  -webkit-animation: load2 2s infinite ease 1.5s;
+  animation: load2 2s infinite ease 1.5s;
+}
+.loader:after {
+  width: 5.2em;
+  height: 10.2em;
+  background-color: <%= options.background %>;
+  border-radius: 0 10.2em 10.2em 0;
+  top: -0.1em;
+  left: 5.1em;
+  -webkit-transform-origin: 0px 5.1em;
+  transform-origin: 0px 5.1em;
+  -webkit-animation: load2 2s infinite ease;
+  animation: load2 2s infinite ease;
+}
+@-webkit-keyframes load2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load2 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+</style>
+
+<div class="loader"><%= options.loading %></div>
+
+<%= options.dev ? '<!-- https://projects.lukehaas.me/css-loaders -->' : '' %>
diff --git a/lib/app/views/loading/fading-circle.html b/lib/app/views/loading/fading-circle.html
index 714186eee1..30e46945c6 100644
--- a/lib/app/views/loading/fading-circle.html
+++ b/lib/app/views/loading/fading-circle.html
@@ -162,4 +162,4 @@ body, html, #__nuxt {
   <div class="sk-circle12 sk-circle"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/folding-cube.html b/lib/app/views/loading/folding-cube.html
index ad54896702..17e46c1a5d 100644
--- a/lib/app/views/loading/folding-cube.html
+++ b/lib/app/views/loading/folding-cube.html
@@ -106,4 +106,4 @@ body, html, #__nuxt {
   <div class="sk-cube3 sk-cube"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/pulse.html b/lib/app/views/loading/pulse.html
index c5fa8ff4f0..4ba2366a20 100644
--- a/lib/app/views/loading/pulse.html
+++ b/lib/app/views/loading/pulse.html
@@ -46,4 +46,4 @@ body, html, #__nuxt {
   <div class="double-bounce2"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/rectangle-bounce.html b/lib/app/views/loading/rectangle-bounce.html
index 363b852743..332800ee90 100644
--- a/lib/app/views/loading/rectangle-bounce.html
+++ b/lib/app/views/loading/rectangle-bounce.html
@@ -72,4 +72,4 @@ body, html, #__nuxt {
   <div class="rect5"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/rotating-plane.html b/lib/app/views/loading/rotating-plane.html
index 6d409a9297..275bb3c61c 100644
--- a/lib/app/views/loading/rotating-plane.html
+++ b/lib/app/views/loading/rotating-plane.html
@@ -42,4 +42,4 @@ body, html, #__nuxt {
 
 <div class="spinner"></div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/three-bounce.html b/lib/app/views/loading/three-bounce.html
index cf24ac71c2..3cc3236f2a 100644
--- a/lib/app/views/loading/three-bounce.html
+++ b/lib/app/views/loading/three-bounce.html
@@ -59,4 +59,4 @@ body, html, #__nuxt {
   <div class="bounce3"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/app/views/loading/wandering-cubes.html b/lib/app/views/loading/wandering-cubes.html
index c3177a399f..2b90b03200 100644
--- a/lib/app/views/loading/wandering-cubes.html
+++ b/lib/app/views/loading/wandering-cubes.html
@@ -66,4 +66,4 @@ body, html, #__nuxt {
   <div class="cube2"></div>
 </div>
 
-<!-- http://tobiasahlin.com/spinkit -->
+<%= options.dev ? '<!-- http://tobiasahlin.com/spinkit -->' : '' %>
diff --git a/lib/common/nuxt.config.js b/lib/common/nuxt.config.js
index 336c38470d..e42726842a 100644
--- a/lib/common/nuxt.config.js
+++ b/lib/common/nuxt.config.js
@@ -131,7 +131,7 @@ export default {
     duration: 5000,
     rtl: false
   },
-  loadingIndicator: false,
+  loadingIndicator: 'default',
   transition: {
     name: 'page',
     mode: 'out-in',
@@ -198,6 +198,7 @@ export default {
   editor: undefined,
   hooks: null,
   messages: {
+    loading: 'Loading...',
     error_404: 'This page could not be found',
     server_error: 'Server error',
     nuxtjs: 'Nuxt.js',
diff --git a/lib/common/options.mjs b/lib/common/options.mjs
index a5fc192226..fd17a635cf 100644
--- a/lib/common/options.mjs
+++ b/lib/common/options.mjs
@@ -113,9 +113,12 @@ Options.from = function (_options) {
     // Apply defaults
     options.loadingIndicator = Object.assign(
       {
-        name: 'pulse',
-        color: '#dbe1ec',
-        background: 'white'
+        name: 'default',
+        color: '#D3D3D3',
+        color2: '#F5F5F5',
+        background: 'white',
+        dev: options.dev,
+        loading: options.messages.loading
       },
       options.loadingIndicator
     )
diff --git a/lib/core/renderer.mjs b/lib/core/renderer.mjs
index 0bf1063201..1fb81ba8ff 100644
--- a/lib/core/renderer.mjs
+++ b/lib/core/renderer.mjs
@@ -101,10 +101,8 @@ export default class Renderer {
     const loadingHTMLPath = path.resolve(this.options.buildDir, 'loading.html')
     if (fs.existsSync(loadingHTMLPath)) {
       this.resources.loadingHTML = fs.readFileSync(loadingHTMLPath, 'utf8')
-      this.resources.loadingHTML = this.resources.loadingHTML.replace(
-        /[\r|\n]/g,
-        ''
-      )
+      this.resources.loadingHTML = this.resources.loadingHTML
+        .replace(/\r|\n|[\t\s]{3,}/g, '')
     } else {
       this.resources.loadingHTML = ''
     }