<template>
    <div class="loading-screen" v-show="isLoading" style="background:rgba(255,255,255,0.4)">
      <div>
        <div class="loading-circle"></div>
      </div>
    </div>
    </template>
    <script>
    export default {
      data() {
        return {
            isLoading: false,
        }
      },
  
    }
    </script>
    <style scoped>
    .loading-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 300;
      flex-direction: column;
      user-select: none;
    }
    .loading-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 3px solid #eff3f6;
      border-top: 3px solid #bbb;
      animation: circleanimation .4s linear infinite
    }
    @keyframes circleanimation {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
    </style>
    