<template>
  <view class="loading">
    <view class="load">
      <view class="loader"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "fileLoading",
  data() {
    return {};
  },
};
</script>

<style lang="less">
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #f7f8fc;
  z-index: 9999999;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  .load {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .loader {
    display: block;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 8rpx solid transparent;
    border-top-color: var(--primaryColor, #b3030e);
    -webkit-animation: spin1 2s linear infinite;
    animation: spin1 2s linear infinite;
  }

  .loader::before {
    content: "";
    position: absolute;
    top: 8rpx;
    left: 8rpx;
    right: 8rpx;
    bottom: 8rpx;
    border-radius: 50%;
    border: 8rpx solid transparent;
    border-top-color: var(--primaryColor, #b3030e);
    -webkit-animation: spin1 3s linear infinite;
    animation: spin1 3s linear infinite;
  }

  .loader::after {
    content: "";
    position: absolute;
    top: 24rpx;
    left: 24rpx;
    right: 24rpx;
    bottom: 24rpx;
    border-radius: 50%;
    border: 8rpx solid transparent;
    border-top-color: var(--primaryColor, #b3030e);
    -webkit-animation: spin1 1.5s linear infinite;
    animation: spin1 1.5s linear infinite;
  }

  @-webkit-keyframes spin1 {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes spin1 {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}
</style>
