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