update readme to use outsourced spinneras

Author: f

README.md

@@ -405,22 +405,32 @@ In this example above, the **tab gets data from back-end**, and the **table load
 
 ```html
 <template lang='pug'>
-div
-  v-wait(for='fetching tabs')
-    template(slot='waiting')
-      b-tabs
-        template(slot='tabs')
-          b-nav-item(active disabled)
-            v-icon(name='circle-o-notch', spin)
-    b-tabs
-      template(slot='tabs')
-        b-nav-item(v-for='tab in tabs') {{ tab.name }}
-
-  v-wait(for='fetching data')
-    table-gradient-spinner(slot='waiting')
-    table
-      tr(v-for='row in data')
-        // ...
+  <div>
+    <v-wait for="fetching tabs">
+      <template slot="waiting">
+        <b-tabs>
+          <template slot="tabs">
+            <b-nav-item active="active" disabled>
+              <v-icon name="circle-o-notch" spin="spin" />
+            </b-nav-item>
+          </template>
+        </b-tabs>
+      </template>
+      <b-tabs>
+        <template slot="tabs">
+          <b-nav-item v-for="tab in tabs">{{ tab.name }}</b-nav-item>
+        </template>
+      </b-tabs>
+    </v-wait>
+    <v-wait for="fetching data">
+      <table-gradient-spinner slot="waiting" />
+      <table>
+        <tr v-for="row in data">
+          <!-- ...-->
+        </tr>
+      </table>
+    </v-wait>
+  </div>
 </template>
 ```
 
@@ -435,11 +445,11 @@ You may want to design your own reusable loader for your project. You better cre
     loading: Loading...
 </i18n>
 
-<template lang="pug">
-  div.loading-spinner
-    //- Uses vue-awesome spinner
-    v-icon(name='refresh', spin)
-    span {{ $t('loading') }}
+<template>
+  <div class="loading-spinner">
+    <v-icon name="refresh" spin="spin" />
+    <span>{{ $t('loading') }}</span>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -459,13 +469,41 @@ Now you can use your spinner everywhere using `slot='waiting'` attribute:
 
 ```html
 <template lang="pug">
-  v-wait(for='fetching data')
-    my-waiter(slot='waiting')
-    div
-      p My main content after fetching data...
+  <v-wait for="fetching data">
+    <my-waiter slot="waiting" />
+    <div>
+      <p>My main content after fetching data...</p>
+    </div>
+  </v-wait>
 </template>
 ```
 
+## 📦 Using with external spinner libraries
+
+You can use `vue-wait` with another spinner libraries like [epic-spinners](/https://github.com/epicmaxco/epic-spinners) or other libraries. You just need to add `slot="waiting"` to the component and Vue handles rest of the work.
+
+First register the component,
+```js
+import { OrbitSpinner } from 'epic-spinners';
+Vue.component('orbit-spinner', OrbitSpinner);
+```
+
+Then use it in your as a `v-wait`'s `waiting` slot.
+```html
+<v-wait for='something to load'>
+  <orbit-spinner
+    slot='waiting'
+    :animation-duration="1500"
+    :size="64"
+    :color="'#ff1d5e'"
+  />
+</v-wait>
+```
+
+... and done!
+
+For other libraries you can use, please see [Loaders section of **vuejs/awesome-vue**](https://github.com/vuejs/awesome-vue#loader).
+
 ## 🚌 Run example
 
 Use `npm run dev-vuex`, `npm run dev-vue` or `npm run dev-wrap` commands.

examples/vue-example/index.js

@@ -1,10 +1,13 @@
 import Vue from 'vue';
 import VueWait from '../../src/vue-wait';
+import { OrbitSpinner } from 'epic-spinners';
 
 import main from './main.vue';
 
 Vue.use(VueWait);
 
+Vue.component('orbit-spinner', OrbitSpinner);
+
 new Vue({
   el: '#app',
   wait: new VueWait({ registerComponents: false }),

examples/vue-example/main.vue

@@ -8,6 +8,15 @@
         This will be shown after load.
       </v-wait>
     </div>
+    <v-wait for='writing code' message='You can also use outsourced spinners like epic-spinners'>
+      <orbit-spinner
+        style="display: block; margin: 0 auto;"
+        slot='waiting'
+        :animation-duration="1500"
+        :size="64"
+        :color="'#ff1d5e'"
+      />
+    </v-wait>
     <button @click='writeCode()' v-wait:disabled='"writing code"'>
       <v-wait for='writing code' message='Writing Code...'>
         <template slot='waiting'>

package.json

@@ -51,6 +51,7 @@
     "babel-loader": "^8.0.0-beta.3",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.11",
+    "epic-spinners": "^1.0.3",
     "eslint": "^4.2.0",
     "husky": "^0.14.3",
     "lint-staged": "^7.1.3",

yarn.lock

@@ -2382,6 +2382,12 @@ entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+epic-spinners@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/epic-spinners/-/epic-spinners-1.0.3.tgz#f8ec3c59a4132de74acfe4edc0a8e1ce8b0c8312"
+  dependencies:
+    vue "2.5.16"
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@@ -6892,7 +6898,7 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.5.13:
+vue@2.5.16, vue@^2.5.13:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"