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

换日线°2025-04-27 11:04

效果图

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