feat: Custom spinner for Loading

Author: rstoenescu

dev/components/global/dialog.vue

@@ -373,9 +373,9 @@ export default {
                   model: 12,
                   color: 'secondary'
                 },
-                slider: {
-                  type: 'slider',
-                  label: 'Slider',
+                range: {
+                  type: 'range',
+                  label: 'Range',
                   model: {
                     min: 7,
                     max: 12

dev/components/global/loading.vue

@@ -14,10 +14,10 @@
         </q-btn>
       </div>
       <p class="caption">
-        ...with a custom colors and spinner size.
+        ...with a custom spinner, colors and size.
       </p>
-      <q-btn push color="light" class="text-dark" @click="customColorSpinner()">
-        Custom Color and Size Spinner
+      <q-btn push color="light" class="text-dark" @click="customLoading()">
+        Show custom Loading
       </q-btn>
       <p class="caption">
         Change Message while Being Displayed
@@ -30,7 +30,11 @@
 </template>
 
 <script>
-import { Loading } from 'quasar'
+import {
+  Loading,
+  QSpinnerFacebook,
+  QSpinnerGears
+} from 'quasar'
 
 function show (options) {
   Loading.show(options)
@@ -45,12 +49,13 @@ export default {
     noMessage () {
       show()
     },
-    customColorSpinner () {
+    customLoading () {
       show({
-        spinnerColor: 'yellow',
-        spinnerSize: 220,
+        spinner: QSpinnerFacebook,
+        spinnerColor: 'amber',
+        spinnerSize: 140,
         message: 'Some important process is in progress. Hang on...',
-        messageColor: 'teal-3'
+        messageColor: 'orange'
       })
     },
     withMessage () {
@@ -60,6 +65,7 @@ export default {
       Loading.show({message: 'First message. Gonna change it in 3 seconds...'})
       setTimeout(() => {
         show({
+          spinner: QSpinnerGears,
           spinnerColor: 'red',
           message: 'Updated message'
         })

src/components/loading/Loading.vue

@@ -1,24 +1,28 @@
 import { Vue } from '../../deps'
 import Events from '../../features/events'
-import Loading from './Loading.vue'
+import { QSpinner } from '../spinner'
 
 let
   vm,
   appIsInProgress = false,
   timeout,
   props = {}
 
+const staticClass = 'q-loading animate-fade fullscreen column items-center justify-center z-absolute'
+
 function isActive () {
   return appIsInProgress
 }
 
 function show ({
   delay = 500,
   message = false,
-  spinnerSize,
-  spinnerColor,
-  messageColor
+  spinnerSize = 80,
+  spinnerColor = 'white',
+  messageColor = 'white',
+  spinner = QSpinner
 } = {}) {
+  props.spinner = spinner
   props.message = message
   props.spinnerSize = spinnerSize
   props.spinnerColor = spinnerColor
@@ -37,8 +41,28 @@ function show ({
     document.body.classList.add('with-loading')
 
     vm = new Vue({
+      name: 'q-loading',
       el: node,
-      render: h => h(Loading, {props})
+      functional: true,
+      render (h) {
+        const child = [
+          h(props.spinner, {props: {
+            color: props.spinnerColor,
+            size: props.spinnerSize
+          }})
+        ]
+
+        if (message) {
+          child.push(h('div', {
+            staticClass: `text-${props.messageColor}`,
+            domProps: {
+              innerHTML: props.message
+            }
+          }))
+        }
+
+        return h('div', {staticClass}, child)
+      }
     })
   }, delay)