ssj_parent/templates/loading/loading.wxss

/* templates/loading/loading.wxss */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loading-img {
  margin: 50rpx auto;
  width: 60%;
  position: relative;
}
.loading-img::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6rpx;
  width: 10%;
  background: #999;
  border-radius: 20rpx;
  animation: line 2s infinite ease-in-out;
}
.loading-img image {
  width: 162rpx;
  height: 171rpx;
  animation: loading 2s infinite ease-in-out;
}
.loading-text {
  color: #666;
  font-weight: 600;
}
@keyframes loading {
  10% {
    transform: translateX(10%)
  }
  50% {
    transform: translateX(250%)
  }
  70% {
    transform: translateX(250%) rotate(180deg)
  }
  90% {
    transform: translateX(10%) rotate(180deg)
  }
  100% {
    transform: translateX(10%) rotate(0deg)
  }
} 

@keyframes line {
  10% {
    width: 10%;
  }
  50%, 70% {
    width: 98%;
  }
  90%, 100% {
    width: 10%;
  }
}