LoadingSpinner.vue

<template>
  <Loading
    id="LoadingSpinner"
    :active.sync="isWaitingForResponse"
    :can-cancel="false"
    :height="128"
    :width="128"
    :z-index="1500"
    :color="color"
    :is-full-page="true"
  >
  <template v-if="textBefore !== ''" v-slot:before>
    <h4>{{ textBefore }}</h4>
  </template>
  <template v-if="textAfter !== ''" v-slot:after>
    <h4>{{ textAfter }}</h4>
  </template>
  </Loading>
</template>

<script lang="ts">
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';


export default {
  name: 'LoadingSpinner',
  components: {
    Loading,
  },
  props: {
    color: {
      default: '#00549f',
      type: String,
    },
    isWaitingForResponse: {
      default: false,
      type: Boolean,
    },
    textBefore: {
      default: '',
      type: String,
    },    
    textAfter: {
      default: '',
      type: String,
    },
  },
};
</script>

<style>
.vld-icon{
  width: 100%;
}
.vld-icon svg{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.vld-icon h4{
  text-align: center;
  max-width: 500px;
}
</style>