微信小程序自实现loading

最新推荐文章于 2025-06-27 08:42:00 发布

小生姜Yasin

最新推荐文章于 2025-06-27 08:42:00 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术文章标签：小程序 loading 动画

本文链接：https://blog.youkuaiyun.com/JiangYuXuan1994/article/details/87719628

本文介绍了如何在微信小程序中实现两种不同的loading动画，分别提供了对应的WXML和WXSS代码示例，展示了loading动画的自定义方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接上代码

第一种

wxml中的代码

<view id='loading_mask'>
  <view id='loading_box'>
    <view id='loading_svg'>
      <text style="animation:shuck1 0.75s infinite;transform: translate(34px,6px);"></text>
      <text style="animation:shuck2 0.75s infinite;transform: translate(54px,14px);"></text>
      <text style="animation:shuck3 0.75s infinite;transform: translate(62px,34px);"></text>
      <text style="animation:shuck4 0.75s infinite;transform: translate(54px,54px);"></text>
      <text style="animation:shuck5 0.75s infinite;transform: translate(34px,62px);"></text>
      <text style="animation:shuck6 0.75s infinite;transform: translate(14px,54px);"></text>
      <text style="animation:shuck7 0.75s infinite;transform: translate(6px,34px);"></text>
      <text style="animation:shuck8 0.75s infinite;transform: translate(14px,14px);"></text>
    </view>
    <text id='loading_txt'>正在加载...</text>
  </view>
</view>

wxss中的代码

@keyframes shuck1 {
  0% {opacity: .85;}
  12.5% {opacity: .7;}
  25% {opacity: .4;}
  37.5% {opacity: .3;}
  50% {opacity: .3;}
  62.5% {opacity: .3;}
  75% {opacity: 1;}
  87.5% {opacity: .9;}
  100% {opacity: .85;}
}
@keyframes shuck2 {
  0% {opacity: 0.9;}
  12.5% {opacity: 0.85;}
  25% {opacity: 0.7;}
  37.5% {opacity: 0.4;}
  50% {opacity: 0.3;}
  62.5% {opacity: 0.3;}
  75% {opacity: 0.3;}
  87.5%