CSS简单实用的加载动画、骨架屏有效果图

效果图

.wxml

<!-- 骨架屏 -->
<view wx:for="{{skeleton}}" wx:key="index" class="container center" style="--w:{{item.w}}rpx;--h:{{item.h}}rpx" />
<!-- 3D转圈 -->
<view class="arco-loading center"><view wx:for="{{5}}" wx:key="index" class="arco-loading-item" />
</view>
<!-- 旋转 -->
<view class="half-circle" />

.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)}
}
/* 圆 */
.half-circle {width: 70rpx;height: 70rpx;border: 2px solid transparent;border-top-color:red;border-right-color:red;margin: 0 auto;border-radius:50%;animation: turn linear infinite 1.5s;
}
@keyframes turn{from{ transform: rotate(-360deg); }to{ transform: rotate(360deg); }
}

.js

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

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