<template>
  <v-overlay :value="loading" color="#013447">
    <div class="loading">
      <div class="spinner">
        <img class="logo one" :src="mySVG" />
      </div>
      <div class="spinner">
        <img class="logo two" :src="mySVG" />
      </div>
      <span>{{ $t('general.loading') }}</span>
    </div>
  </v-overlay>
</template>

<script>
export default {
  data() {
    return{
      loading: false,
      mySVG: require('assets/img/ggz/loading-logo.svg')
    }
  },
  methods: {
    start() {
      this.loading = true
    },
    finish() {
      this.loading = false
    },
  },
}
</script>

<style lang="scss" scoped>
.loading {
  width: 140px;
  height: 180px;
  margin: auto;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  .spinner {
    width: 100%;
    position: absolute;
    .one {
      transform: rotate(25deg);
    }
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
  }

  span{
    display:flex;
    align-items: flex-end;
    font-family:"Source Sans Pro", sans-serif;
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
