<template>
  <div>
    <div v-if="$parent.isLoading" class="loader">
      <span>Laden...</span>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loader {
  height: 20vh;
  padding: 10vh;
  text-align: center;

  span {
    position: relative;

    &::after,
    &::before {
      content: ' ';
      position: absolute;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: currentColor;
      opacity: 0.6;
      position: absolute;
      bottom: 2em;
      left: 0;
      animation: sk-bounce 2s infinite ease-in-out;
    }

    &::after {
      animation-delay: -0.8s;
      opacity: 0.4;
    }
  }

  @keyframes sk-bounce {
    0%,
    100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }
}
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Loader extends Vue {}
</script>
