youxi-app/components/loading.uvue

<style scoped>
  .loader3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
  }

  .bars {
    width: 10px;
    height: 20px;
    margin: 0 2px;
    border-radius: 4px;
    animation: loader3 3s ease-in-out infinite;
  }

  .bar1 {
    background-color: #4285F4;
    animation-delay: -0.8s;
  }

  .bar2 {
    background-color: #4285F4;
    animation-delay: -0.7s;
  }

  .bar3 {
    background-color: #4285F4;
    animation-delay: -0.6s;
  }

  .bar4 {
    background-color: #4285F4;
    animation-delay: -0.5s;
  }

  .bar5 {
    background-color: #4285F4;
    animation-delay: -0.4s;
  }

  .bar6 {
    background-color: #4285F4;
    animation-delay: -0.3s;
  }

  .bar7 {
    background-color: #4285F4;
    animation-delay: -0.2s;
  }

  .bar8 {
    background-color: #4285F4;
    animation-delay: -0.1s;
  }

  .bar9 {
    background-color: #4285F4;
    animation-delay: 0s;
  }

  .bar10 {
    background-color: #4285F4;
    animation-delay: 0.1s;
  }

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

    20% {
      transform: scale(1, 2.32);
    }

    40% {
      transform: scale(1);
    }
  }
  .loading-image {
    @apply w-full h-full fixed bg-[#000118] top-0 left-0 flex items-center justify-center;
    z-index: 10000;
  }
</style>

<template>
  <view class="loading-image">
     <div class="loader3">
    <div class="bars bar1"></div>
    <div class="bars bar2"></div>
    <div class="bars bar3"></div>
    <div class="bars bar4"></div>
    <div class="bars bar5"></div>
    <div class="bars bar6"></div>
    <div class="bars bar7"></div>
    <div class="bars bar8"></div>
    <div class="bars bar9"></div>
    <div class="bars bar10"></div>
  </div>
  </view>
</template>