HTFX-CRM-Sales/uni_modules/qiun-data-charts/components/qiun-loading/loading2.vue

<template>
  <view class="spinWrapper">
    <view class="spin" :style="{ color: color }">
      <view class="spinItem"></view>
      <view class="spinItem"></view>
      <view class="spinItem"></view>
      <view class="spinItem"></view>
      <view class="spinItem"></view>
      <view class="spinItem"></view>
      <view class="spinItem"></view>
      <view class="spinItem"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Loading2',
  props: {
    color: {
      type: String,
      required: false,
      default: '#0E3673'
    }
  }
};
</script>

<style scoped="true">
.spinWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 70px;
  transform: scale(0.8);
  margin-top: 64px;
  margin-bottom: 64px;
  .spin {
    position: relative;
    top: -10px;
    left: -10px;
    .spinItem:nth-child(1) {
      top: 25px;
      left: 0;
      -webkit-animation: ball-spin-fade-loader 1s -0.12s infinite linear;
      animation: ball-spin-fade-loader 1s -0.12s infinite linear;
    }

    .spinItem:nth-child(2) {
      top: 17.04545px;
      left: 17.04545px;
      -webkit-animation: ball-spin-fade-loader 1s -0.24s infinite linear;
      animation: ball-spin-fade-loader 1s -0.24s infinite linear;
    }

    .spinItem:nth-child(3) {
      top: 0;
      left: 25px;
      -webkit-animation: ball-spin-fade-loader 1s -0.36s infinite linear;
      animation: ball-spin-fade-loader 1s -0.36s infinite linear;
    }

    .spinItem:nth-child(4) {
      top: -17.04545px;
      left: 17.04545px;
      -webkit-animation: ball-spin-fade-loader 1s -0.48s infinite linear;
      animation: ball-spin-fade-loader 1s -0.48s infinite linear;
    }

    .spinItem:nth-child(5) {
      top: -25px;
      left: 0;
      -webkit-animation: ball-spin-fade-loader 1s -0.6s infinite linear;
      animation: ball-spin-fade-loader 1s -0.6s infinite linear;
    }

    .spinItem:nth-child(6) {
      top: -17.04545px;
      left: -17.04545px;
      -webkit-animation: ball-spin-fade-loader 1s -0.72s infinite linear;
      animation: ball-spin-fade-loader 1s -0.72s infinite linear;
    }

    .spinItem:nth-child(7) {
      top: 0;
      left: -25px;
      -webkit-animation: ball-spin-fade-loader 1s -0.84s infinite linear;
      animation: ball-spin-fade-loader 1s -0.84s infinite linear;
    }

    .spinItem:nth-child(8) {
      top: 17.04545px;
      left: -17.04545px;
      -webkit-animation: ball-spin-fade-loader 1s -0.96s infinite linear;
      animation: ball-spin-fade-loader 1s -0.96s infinite linear;
    }

    .spinItem {
      background-color: currentColor;
      width: 15px;
      height: 15px;
      border-radius: 100%;
      margin: 2px;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      position: absolute;
    }
  }
}

@-webkit-keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ball-spin-fade-loader {
  50% {
    opacity: 0.3;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


</style>