mp_exhibitor_miniprog/components/common/u-loading/index.vue

<template>
  <view class="loading-container" :class="loading ? 'show' : 'hide'">
    <view class="loading-wrapper">
      <image class="loading-logo" src="https://onlinecatelogue.productronicachina.com.cn/assets/image/normal-logo.jpg" mode="aspectFit" />
      <view class="loader"></view>
    </view>
  </view>
</template>

<script>
import vanLoading from '@/wxcomponents/vant/loading/index'
import vanOverlay from '@/wxcomponents/vant/overlay/index'

export default {
  props: {
    loading: Boolean
  },
  components: {
    vanLoading,
    vanOverlay
  },
  data() {
    return {
      show: false
    };
  }
}
</script>

<style lang="scss">

.loading-container {
  z-index: 99999;
  background-color: #ffffff;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  transition: .3s ease-in-out;
  //transform: scale(0.1);
  &.show {
    opacity: 1;
    //transform: scale(1);
  }
  &.hide {
    transition-delay: .5s;
    opacity: 0;
    //transform: scale(0.1);
    z-index: -99999;
  }
  .loader {
    width: calc(350rpx / 0.707);
    height: 28rpx;
    background: repeating-linear-gradient(-45deg, $buttonPrimaryColor 0 30rpx,#0000 0 40rpx) left/200% 100%;
    animation: i3 2.5s infinite linear;
    border-radius: 10rpx;
    border: 1rpx solid $buttonPrimaryColor;
  }

  @keyframes i3 {
    100% {
      background-position: right
    }
  }

  /*.loader {
    display: block;
    --height-of-loader: 4px;
    --loader-color: #0071e2;
    width: 130px;
    height: var(--height-of-loader);
    border-radius: 30px;
    background-color: rgba(0,0,0,0.2);
    position: relative;
  }

  .loader::before {
    content: "";
    position: absolute;
    background: var(--loader-color);
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 30px;
    animation: moving 1s ease-in-out infinite;
  ;
  }

  @keyframes moving {
    50% {
      width: 100%;
    }

    100% {
      width: 0;
      right: 0;
      left: unset;
    }
  }*/
}
.van-overlay {
  background-color: #ffffff;
}
.loading-wrapper {
  //height: 100vh;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  .loading-logo {
    height: 160px;
    width: 160px;
  }
}
</style>