Browse Source

[ADD] spinner loading in pos loader

Gogs 7 years ago
parent
commit
92c7a47083
3 changed files with 15 additions and 2 deletions
  1. 1 0
      package.json
  2. 10 2
      src/components/Loader.vue
  3. 4 0
      yarn.lock

+ 1 - 0
package.json

@@ -30,6 +30,7 @@
 		"vue": "^2.4.1",
 		"vue-form-wizard": "^0.6.1",
 		"vue-js-modal": "^1.2.6",
+		"vue-simple-spinner": "^1.2.1",
 		"vuex": "^2.3.1"
 	}
 }

+ 10 - 2
src/components/Loader.vue

@@ -1,12 +1,16 @@
 <template lang="pug">
-    modal(name="pos-loader" transition="nice-modal-fade" @before-close="beforeClose")
-        h2 Cargando
+    modal(name="pos-loader" transition="nice-modal-fade" @before-close="beforeClose" :classes="['v--modal', 'pos-loader']")
+        simple-spinner(size="large" message="Cargando, espere...")
 </template>
 
 <script>
     import { mapGetters, mapActions } from 'vuex'
+    import Spinner from 'vue-simple-spinner'
 
     export default {
+        components: {
+            'simple-spinner': Spinner
+        },
         computed: mapGetters({
             loaded: 'isLoaded'
         }),
@@ -37,5 +41,9 @@
 </script>
 
 <style lang="sass">
+    .pos-loader
+        display: flex
+        align-items: center
+        justify-content: center
 
 </style>

+ 4 - 0
yarn.lock

@@ -3946,6 +3946,10 @@ vue-loader@^12.2.2:
     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.2.2"
 
+vue-simple-spinner@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/vue-simple-spinner/-/vue-simple-spinner-1.2.1.tgz#14da4648ecef9c9674845c39316ed7dac1086879"
+
 vue-style-loader@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.1.tgz#c8b639bb2f24baf9d78274dc17e4f264c1deda08"