<template>
|
<div class="pam-loading" v-if="isLoading">
|
<lottie
|
:options="defaultOptions"
|
:width="250"
|
:height="250"
|
:loop="true"/>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { Component, Vue } from 'nuxt-property-decorator';
|
import Lottie from 'vue-lottie/src/lottie.vue';
|
@Component({
|
components:{
|
'lottie':Lottie
|
}
|
})
|
export default class Loading extends Vue {
|
isLoading=false;
|
defaultOptions={ animationData: require('@/assets/lottie/loading.json')};
|
start():void{
|
this.isLoading = true;
|
}
|
finish():void{
|
this.isLoading = false;
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.pam-loading{
|
position: absolute;
|
background-color: rgba(#222222,0.5);
|
width: 100%;
|
height: 100%;
|
z-index: 99;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
</style>
|
