<template>
|
<BlockUI message="" :html="thisHtml" v-if="loadinger" />
|
</template>
|
<style>
|
.loading-container .loading-backdrop {
|
background: #fff !important;
|
opacity: 0.7 !important;
|
}
|
.loading-container .loading {
|
background: none !important;
|
box-shadow: none !important;
|
}
|
</style>
|
<style src="@/vendor/libs/spinkit/spinkit.scss" lang="scss"></style>
|
<script>
|
import Vue from 'vue'
|
import BlockUI from 'vue-blockui'
|
|
const loadingJson = {
|
'sk-rotating-plane': `<div class="sk-rotating-plane sk-primary"></div>`,
|
'sk-double-bounce': `<div class="sk-double-bounce sk-primary">
|
<div class="sk-child sk-double-bounce1"></div>
|
<div class="sk-child sk-double-bounce2"></div>
|
</div>`,
|
'sk-wave': `<div class="sk-wave sk-primary">
|
<div class="sk-rect sk-rect1"></div>
|
<div class="sk-rect sk-rect2"></div>
|
<div class="sk-rect sk-rect3"></div>
|
<div class="sk-rect sk-rect4"></div>
|
<div class="sk-rect sk-rect5"></div>
|
</div>`,
|
'sk-wandering-cubes': `<div class="sk-wandering-cubes sk-primary">
|
<div class="sk-cube sk-cube1"></div>
|
<div class="sk-cube sk-cube2"></div>
|
</div>`,
|
'sk-spinner': `<div class="sk-spinner sk-spinner-pulse sk-primary"></div>`,
|
'sk-chasing-dots': `<div class="sk-chasing-dots sk-primary">
|
<div class="sk-child sk-dot1"></div>
|
<div class="sk-child sk-dot2"></div>
|
</div>`,
|
'sk-three-bounce': `<div class="sk-three-bounce sk-primary">
|
<div class="sk-child sk-bounce1"></div>
|
<div class="sk-child sk-bounce2"></div>
|
<div class="sk-child sk-bounce3"></div>
|
</div>`,
|
'sk-circle': `<div class="sk-circle sk-primary">
|
<div class="sk-circle1 sk-child"></div>
|
<div class="sk-circle2 sk-child"></div>
|
<div class="sk-circle3 sk-child"></div>
|
<div class="sk-circle4 sk-child"></div>
|
<div class="sk-circle5 sk-child"></div>
|
<div class="sk-circle6 sk-child"></div>
|
<div class="sk-circle7 sk-child"></div>
|
<div class="sk-circle8 sk-child"></div>
|
<div class="sk-circle9 sk-child"></div>
|
<div class="sk-circle10 sk-child"></div>
|
<div class="sk-circle11 sk-child"></div>
|
<div class="sk-circle12 sk-child"></div>
|
</div>`,
|
'sk-cube-grid': `<div class="sk-cube-grid sk-primary">
|
<div class="sk-cube sk-cube1"></div>
|
<div class="sk-cube sk-cube2"></div>
|
<div class="sk-cube sk-cube3"></div>
|
<div class="sk-cube sk-cube4"></div>
|
<div class="sk-cube sk-cube5"></div>
|
<div class="sk-cube sk-cube6"></div>
|
<div class="sk-cube sk-cube7"></div>
|
<div class="sk-cube sk-cube8"></div>
|
<div class="sk-cube sk-cube9"></div>
|
</div>`,
|
'sk-fading-circle': `<div class="sk-fading-circle sk-primary">
|
<div class="sk-circle1 sk-circle"></div>
|
<div class="sk-circle2 sk-circle"></div>
|
<div class="sk-circle3 sk-circle"></div>
|
<div class="sk-circle4 sk-circle"></div>
|
<div class="sk-circle5 sk-circle"></div>
|
<div class="sk-circle6 sk-circle"></div>
|
<div class="sk-circle7 sk-circle"></div>
|
<div class="sk-circle8 sk-circle"></div>
|
<div class="sk-circle9 sk-circle"></div>
|
<div class="sk-circle10 sk-circle"></div>
|
<div class="sk-circle11 sk-circle"></div>
|
<div class="sk-circle12 sk-circle"></div>
|
</div>`,
|
'sk-folding-cube': `<div class="sk-folding-cube sk-primary">
|
<div class="sk-cube1 sk-cube"></div>
|
<div class="sk-cube2 sk-cube"></div>
|
<div class="sk-cube4 sk-cube"></div>
|
<div class="sk-cube3 sk-cube"></div>
|
</div>`
|
}
|
Vue.use(BlockUI)
|
export default {
|
name: 'vLoading',
|
props: ['loadinger', 'loadingType', 'loadingTitle'],
|
data () {
|
return {
|
html: `<h5 class="text-center mb-0">LOADING...</h5>`
|
}
|
},
|
computed: {
|
thisHtml () {
|
let str =
|
'<div class="sk-folding-cube sk-primary"><div class="sk-cube1 sk-cube"></div><div class="sk-cube2 sk-cube"></div><div class="sk-cube4 sk-cube"></div><div class="sk-cube3 sk-cube"></div></div>'
|
for (let name in loadingJson) {
|
if (name === this.loadingType) {
|
str = loadingJson[name]
|
}
|
}
|
str += `<h5 class="text-center mb-0">${
|
this.loadingTitle && this.loadingTitle !== ''
|
? this.loadingTitle
|
: 'LOADING...'
|
}</h5>`
|
return str
|
}
|
}
|
}
|
</script>
|
