<template>
   <div class="loadingPop">
      <div class="loadingCssBox">
         <div class="loadingCssItem"></div>
         <div class="loadingCssItem"></div>
         <div class="loadingCssItem"></div>
         <div class="loadingCssItem"></div>
      </div>
      <div class="loadingTip">资源加载中...</div>
   </div>
</template>

<script>
export default {
   name: "loading"
}
</script>

<style lang="less" scoped>
@keyframes rotate {
   0% {
      transform: rotate(0deg);
   }
   90% {
      transform: rotate(360deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
.loadingPop {
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 9999999;
   background: rgba(0, 0, 0, 0.5);
   .loadingCssBox {
      width: 0.27rem;
      height: 0.27rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: space-between;
      margin-bottom: 0.24rem;
      animation: rotate 1.5s linear infinite;
      .loadingCssItem {
         width: 0.11rem;
         height: 0.11rem;
         border-radius: 50%;
         background: #11ffd4;
         opacity: 0.5;
         &:nth-child(2) {
            opacity: 1;
         }
      }
   }
   .loadingTip {
      font-size: 0.14rem;
      color: #fff;
   }
}
</style>
