ykt-team-wxapp/pages/home/loading.vue

<template>
  <view class="loader-container">
    <view class="loader">
      <view class="hexagon-container">
        <view class="hexagon hex_1"></view>
        <view class="hexagon hex_2"></view>
        <view class="hexagon hex_3"></view>
        <view class="hexagon hex_4"></view>
        <view class="hexagon hex_5"></view>
        <view class="hexagon hex_6"></view>
        <view class="hexagon hex_7"></view>
      </view>
    </view>
  </view>
</template>
<script>

</script>
<style lang="scss" scoped>

.loader-container {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9999;
  background-color: #fefefe;
}

.loader {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0px 0px -40px;
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid rgb(0, 122, 255); //#007aff

  // animation: rotate3 3s linear infinite;
  &:before {
    content: '';
    width: 82px;
    height: 82px;
    display: block;
    position: absolute;
    border: 1px solid rgba(0, 122, 255, 0.514);
    border-radius: 50%;
    top: -1px;
    left: -1px;
    box-sizing: border-box;
    // border-bottom-color: transparent;
    // border-left-color: transparent;
    // border-right-color: transparent;
    clip: rect(0px, 17.5px, 17.5px, 0px);
    z-index: 10;
    animation: rotate infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
  }

  &:after {
    content: '';
    width: 82px;
    height: 82px;
    display: block;
    position: absolute;
    border: 1px solid rgba(0, 122, 255, 0.11);
    border-radius: 50%;
    top: -1px;
    left: -1px;
    box-sizing: border-box;
    // transform: rotate(30deg);
    // border-bottom-color: transparent;
    // border-left-color: transparent;
    // border-right-color: transparent;
    clip: rect(0px, 82px, 75px, 0px);
    z-index: 9;
    // animation: rotate2 infinite, rotate3 infinite;
    // animation-duration: 3s;
    // animation-timing-function: linner;
    animation: rotate2 3s linear infinite;
  }
}

.hexagon-container {
  position: relative;
  top: 16.5px;
  left: 20.5px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 20px;
  height: 11.5px;
  background-color: #007aff;

  &:before {
    content: "";
    position: absolute;
    top: -5.5px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 6px solid #007aff;
  }

  &:after {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 5.7px solid #007aff;
  }
}

$hexagons: (
  (1, 0px, 0px),
  (2, 0px, 21px),
  (3, 18px, 31.5px),
  (4, 36px, 21px),
  (5, 36px, 0px),
  (6, 18px, -10.5px),
  (7, 18px, 10.5px)
);

$time: 3s;
$delay: $time / 14;

@each $hexagon in $hexagons {
  $index: nth($hexagon, 1);
  $top: nth($hexagon, 2);
  $left: nth($hexagon, 3);
  
  .hexagon.hex_#{$index} {
    top: $top;
    left: $left;
    animation: Animasearch $time ease-in-out infinite;
    animation-delay: $delay * $index;
  }
}


@keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  15%,
  50% {
    transform: scale(0.5);
    opacity: 0;
  }

  65% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 17.5px, 17.5px, 0px);
  }

  50% {
    clip: rect(0px, 20px, 20px, 0px);
  }

  100% {
    transform: rotate(360deg);
    clip: rect(0px, 17.5px, 17.5px, 0px);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 82, 75px, 0px);
  }

  50% {
    clip: rect(0px, 82, 0px, 0px);
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 75px, 0px);
  }
}

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

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