vue-loading-template

vue-loading-template

Use SVG for loading.

Demo: https://jkchao.github.io/vue-loading/

Start

npm install vue-loading-template --save

Options

Prop	Type	Required	Default	Available values
type	String	false	balls	balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylon
color	String	false	#5ac1dd
size	Object	false	{ width: '30px', height: '30px' }

Example in SPA

 <template>
    <div>
       <h2>bars</h2>
       <vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>    
    </div>
 </template>
  <script>
  import { VueLoading } from 'vue-loading-template'
  export default {
    name: 'app',
    components: {
      VueLoading
    }
  }
  </script>

Or you can install it in your main.js

// main.js
import Vue from 'vue'
import VueLoading from 'vue-loading-template'
Vue.use(VueLoading, /** options **/)

If you use it in TypeScript, you can:

// main.ts
import Vue from 'vue'
import vueLoading, { VueLoadingOptions } from 'vue-loading-template'

Vue.use<VueLoadingOptions>(VueLoading, /** options **/)

so, you will receive the tip about optional options.

License

MIT