commodity-manage-app/common/betone_components/betone-loading.vue

<template>
  <view>
    <template v-if="showLoading">
      <view class="loading-box" :class="{ mask: mask }">
        <view class="loading-wrap">
          <view class="loading-css">
            <view></view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
            <view></view>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>
<script>
export default {
  name: "BetLoading",
  props: {
    mask: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    showLoading(val) {
      this.$emit("change", val);
    },
  },
  data() {
    return {
      showLoading: false,
    };
  },
  methods: {
    show() {
      this.showLoading = true;
    },
    hide() {
      this.showLoading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.loading-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999999;
  &.mask {
    width: 750rpx;
    height: 100vh;
    overflow: hidden;
  }
  .loading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 19;
    transform: translate(-50%, -50%);
    width: 200rpx;
    height: 200rpx;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10rpx 1px rgba($color: #eadada, $alpha: 0.2);
    border-radius: 30rpx;
  }
  .loading-css {
    position: relative;
    box-sizing: border-box;
    display: block;
    font-size: 0;
    color: #30f89c;
    width: 30rpx;
    height: 30rpx;
  }
  .loading-css,
  .loading-css > view {
    position: relative;
    box-sizing: border-box;
  }

  .loading-css {
    display: block;
    font-size: 0;
    color: #30f89c;
  }

  .loading-css.la-dark {
    color: #333;
  }

  .loading-css > view {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
  }

  .loading-css {
    width: 64rpx;
    height: 64rpx;
  }

  .loading-css > view {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16rpx;
    height: 16rpx;
    margin-top: -8rpx;
    margin-left: -8rpx;
    border-radius: 100%;
    animation: ball-spin-clockwise 1s infinite ease-in-out;
  }

  .loading-css > view:nth-child(1) {
    top: 5%;
    left: 50%;
    animation-delay: -0.875s;
  }

  .loading-css > view:nth-child(2) {
    top: 18.1801948466%;
    left: 81.8198051534%;
    animation-delay: -0.75s;
  }

  .loading-css > view:nth-child(3) {
    top: 50%;
    left: 95%;
    animation-delay: -0.625s;
  }

  .loading-css > view:nth-child(4) {
    top: 81.8198051534%;
    left: 81.8198051534%;
    animation-delay: -0.5s;
  }

  .loading-css > view:nth-child(5) {
    top: 94.9999999966%;
    left: 50.0000000005%;
    animation-delay: -0.375s;
  }

  .loading-css > view:nth-child(6) {
    top: 81.8198046966%;
    left: 18.1801949248%;
    animation-delay: -0.25s;
  }

  .loading-css > view:nth-child(7) {
    top: 49.9999750815%;
    left: 5.0000051215%;
    animation-delay: -0.125s;
  }

  .loading-css > view:nth-child(8) {
    top: 18.179464974%;
    left: 18.1803700518%;
    animation-delay: 0s;
  }

  .loading-css.la-sm {
    width: 64rpx;
    height: 64rpx;
  }

  .loading-css.la-sm > view {
    width: 8rpx;
    height: 8rpx;
    margin-top: -4rpx;
    margin-left: -4rpx;
  }

  .loading-css.la-2x {
    width: 128rpx;
    height: 128rpx;
  }

  .loading-css.la-2x > view {
    width: 64rpx;
    height: 64rpx;
    margin-top: -8px;
    margin-left: -8px;
  }

  .loading-css.la-3x {
    width: 192rpx;
    height: 192rpx;
  }

  .loading-css.la-3x > view {
    width: 48rpx;
    height: 48rpx;
    margin-top: -24rpx;
    margin-left: -24rpx;
  }

  @keyframes ball-spin-clockwise {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    20% {
      opacity: 1;
    }

    80% {
      opacity: 0;
      transform: scale(0);
    }
  }
}
@keyframes ball-circus-position {
  50% {
    left: 100%;
  }
}

@keyframes ball-circus-size {
  50% {
    transform: scale(0.3, 0.3);
  }
}
</style>