效果图

.wxml

<!-- 骨架屏 -->
<view wx:for="{{skeleton}}" wx:key="index" class="container center" style="--w:{{item.w}}rpx;--h:{{item.h}}rpx" />
<!-- 加载 -->
<view class="arco-loading center">
  <view wx:for="{{5}}" wx:key="index" class="arco-loading-item" />
</view>
<!-- 圆 -->
<view class="preloader">
  <view />
</view>

.wxss

page{
  text-align: center;
}
.center{
  margin: 0 auto 100rpx;
}
/* 骨架屏 */
.container{
  width: var(--w);
  height: var(--h);
  background: linear-gradient(90deg,#F2F3F5 25%,#E5E6EB 37%,#F2F3F5 63%);
  background-size: 400% 100%;
  animation:skeleton 1.5s cubic-bezier(0,0,1,1) infinite;
}
@keyframes skeleton {
  from{ background-position:100% 50%; }
  to{ background-position: 0 50%; }
}
/* 加载 */
.arco-loading{
  position: relative;
  width: 102rpx;
  height: 16rpx;
  transform-style: preserve-3d;
  perspective: 400rpx;
}
.arco-loading-item{
  position: absolute;
  top: 0;
  left: 50%;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #165DFF;
  transform: translate(-50%) scale(0);
  animation: arco 2s cubic-bezier(0,0,1,1) infinite forwards;
}
.arco-loading-item:nth-child(2) {
  background-color: #306FFF;
  animation-delay: .4s
}

.arco-loading-item:nth-child(3) {
  background-color: #1D4DD2;
  animation-delay: .8s
}

.arco-loading-item:nth-child(4) {
  background-color: #466ACB;
  animation-delay: 1.2s
}

.arco-loading-item:nth-child(5) {
  background-color: #5D7CCB;
  animation-delay: 1.6s
}
@keyframes arco{
  0% {
    transform: translate3D(-48%,0,-2rpx) scale(0.5)
  }
  22%{
    transform: translate3D(-280%,0,0) scale(1.25)
  }
  44%{
    transform: translate3D(-48%,0,2rpx) scale(2)
  }
  47%{
    transform: translateZ(2rpx) scale(2)
  }
  50% {
      transform: translate3D(48%,0,2rpx) scale(2)
  }
  72%{
    transform: translate3D(280%,0,0) scale(1.25)
  }
  94%{
    transform: translate3D(48%,0,-2rpx) scale(0.5)
  }
  97% {
    transform: translateZ(-2rpx) scale(0.5)
  }
}
/* 圆 */
.holder{
  width: 100%;
  float: left;
  height: 120upx;
  text-align: center;
  display: flex;
  align-items: center;
  position: relative;
}
.preloader {
  position: relative;
  width: 72rpx;
  height: 0%;
  padding-bottom: 72rpx;
  left: 50%;
  top: 36rpx;
  transform: translateX(-50%) translateY(-50%);
}
.preloader view {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  animation: animatePreloader 0.7s infinite linear;
  transform-origin: 50% 100%;
}
.preloader view:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  border: 1px solid #FF0505;
  border-radius: 50%;
  box-sizing: border-box;
}
@keyframes animatePreloader {
    0% {
        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
    }
    100% {
        transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
    }
}

.js

Page({
  data: {
    skeleton:[
      {w:100,h:100},
      {w:500,h:100},
      {w:300,h:60},
    ]
  },
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。