feat: new default loading indicators

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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 -->' : '' %>

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',

lib/common/options.mjs

@@ -113,9 +113,12 @@ Options.from = function (_options) {
     // Apply defaults
     options.loadingIndicator = Object.assign(
       {
-        name: 'pulse',
+        name: 'default',
-        color: '#dbe1ec',
+        color: '#D3D3D3',
-        background: 'white'
+        color2: '#F5F5F5',
+        background: 'white',
+        dev: options.dev,
+        loading: options.messages.loading
       },
       options.loadingIndicator
     )

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(
+      this.resources.loadingHTML = this.resources.loadingHTML
-        /[\r|\n]/g,
+        .replace(/\r|\n|[\t\s]{3,}/g, '')
-        ''
-      )
     } else {
       this.resources.loadingHTML = ''
     }