VAVABUY/components/GlobalLoading.vue

<template>
  <up-overlay :show="isLoading" :duration="400" :z-index="99999" :opacity="0.1">
    <view class="loading" @touchmove.stop.prevent>
      <!-- <up-loading-icon mode="circle" size="46" color="black"></up-loading-icon> -->
      <!-- <image class="loading-gif" src="/static/loading.gif" mode="aspectFit" /> -->
      <!-- <view class="loader-inner"></view> -->
      <view class="load_11">
        <view class="rect1"></view>
        <view class="rect2"></view>
        <view class="rect3"></view>
        <view class="rect4"></view>
        <view class="rect5"></view>
      </view>
    </view>
  </up-overlay>
</template>

<script setup>
import { watch, computed } from "vue";
import { useLoadingStore } from "@/store";

const loadingStore = useLoadingStore();
const props = defineProps({
  msg: Object,
});

const isLoading = computed(() => !!(loadingStore?.visible || props.msg?.show));

watch(isLoading, (val) => {
  // #ifdef H5
  document.body.style.overflow = val ? "hidden" : "";
  // #endif
});
</script>

<style lang="less" scoped>
@import url("@/style.less");

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  pointer-events: none;
  cursor: not-allowed;
  box-sizing: border-box;
  .loader-inner {
    width: 60px;
    height: 60px;
    border: 6px solid #dfe3eb;
    border-top: 6px solid @black;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

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

  .load_11 {
    width: 100rpx;
    height: 68rpx;
    display: inline-block;
    text-align: center;
    font-size: 20rpx;
  }

  .load_11 > view {
    &:last-child {
      margin-right: 0;
    }

    background-color: #000000;
    height: 100%;
    width: 10rpx;
    margin-right: 6rpx;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }

  .load_11 .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }

  .load_11 .rect3 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }

  .load_11 .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  .load_11 .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }

  @-webkit-keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      -webkit-transform: scaleY(0.4);
    }

    20% {
      -webkit-transform: scaleY(1);
    }
  }

  @keyframes sk-stretchdelay {
    0%,
    40%,
    100% {
      transform: scaleY(0.4);
      -webkit-transform: scaleY(0.4);
    }

    20% {
      transform: scaleY(1);
      -webkit-transform: scaleY(1);
    }
  }
}
</style>