vue-loading-template
Use SVG for loading.
Demo: https://jkchao.github.io/vue-loading/
Start
npm install vue-loading-template --saveOptions
| 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
