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

效果图

.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，很少看博客，对你有帮助别忘记点赞收藏。