1.实现效果

2.实现原理

  • 伪元素
  • animation

3.实现代码

<view class="box"><view class="charge"><view class="wave"></view></view>
</view>
<view class="box"><view class="loading1"></view>
</view>
<view class="box"><view class="loading2"></view>
</view>
<view class="box"><view class="loading3"></view>
</view>
<view class="box"><view class="loading4"></view>
</view>
<view class="box"><view class="loading5"></view>
</view>
<view class="box"><view class="loading6"></view>
</view>
<view class="box"><view class="loading7"></view>
</view>
<view class="box"><view class="loading8"></view>
</view>
<view class="box"><view class="loading9"></view>
</view>
<view class="box"><view class="loading10"></view>
</view>
<view class="box"><view class="loading11"></view>
</view>
<view class="box"><view class="loading12"><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view></view>
</view>
<view class="box"><view class="loading13"><view></view><view></view><view></view><view></view><view></view></view>
</view>
<view class="box"><view class="loading14"><view></view><view></view><view></view><view></view></view>
</view>
<view class="box"><view class="loading15"><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view></view>
</view>
<view class="box"><view class="loading16"><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view><view></view></view>
</view>
<view class="box"><view class="loading17"><view></view><view></view><view></view><view></view></view>
</view>
<view class="box"><view class="loading18"><view></view><view></view><view></view><view></view><view></view></view>
</view><view class="box"><view class="loading19"><view></view><view></view><view></view><view></view><view></view></view>
</view><view class="box"><view class="loading20"><view></view><view></view></view>
</view>

page {background-image: linear-gradient(to right, #c6d6b4 0%, #e0d5d9 100%);padding-bottom: 100rpx;
}.tips {font-size: 26rpx;color: #fff;padding: 10rpx 40rpx;
}.box {margin: 20rpx auto;width: 685rpx;height: 250rpx;background: #ccd8d7;border-radius: 10rpx;box-shadow: 0px 0px 30rpx 1rpx #eff3eb inset;display: flex;align-items: center;justify-content: center;position: relative;
}.charge {position: relative;width: 100rpx;height: 200rpx;margin: 10rpx auto;background-color: #fff;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;text-shadow: 0px 0px 10rpx #fff;
}.charge::after {content: '';position: absolute;top: -15rpx;left: 30rpx;width: 40rpx;height: 15rpx;border-top-left-radius: 10rpx;border-top-right-radius: 10prx;background-color: #fff;
}.wave {position: absolute;bottom: 0;width: 100%;background: linear-gradient(#c6f3bd, #79965c, #7b8d82);overflow: hidden;animation: more 10s linear infinite;
}@keyframes more {0% {height: 0%;}100% {height: 100%;}
}.wave::before {position: absolute;content: '';top: -185rpx;left: -50rpx;width: 200rpx;height: 200rpx;border-radius: 45%;background-color: #fff;animation: move 10s linear infinite;
}.wave::after {position: absolute;content: '';top: -180rpx;left: -50rpx;width: 200rpx;height: 200rpx;border-radius: 45%;background-color: #fff;opacity: .5;animation: move 8s linear infinite;
}@keyframes move {100% {transform: rotate(360deg);}
}.loading1 {width: 30px;height: 30px;border: 2px solid #2161319f;border-top-color: transparent;border-radius: 100%;animation: circle1 infinite 0.75s linear;
}@keyframes circle1 {0% {transform: rotate(0);}100% {transform: rotate(360deg);}
}.loading2 {position: relative;width: 30px;height: 30px;border: 2px solid #2161319f;border-top-color: rgba(0, 0, 0, 0.2);border-right-color: rgba(0, 0, 0, 0.2);border-bottom-color: rgba(0, 0, 0, 0.2);border-radius: 100%;animation: circle2 infinite 0.75s linear;
}@keyframes circle2 {0% {transform: rotate(0);}100% {transform: rotate(360deg);}
}.loading3 {position: relative;width: 30px;height: 30px;border: 2px solid #2161319f;border-top-color: transparent;border-bottom-color: transparent;border-radius: 100%;animation: arrow-circle infinite 0.75s linear;
}.loading3:before,
.loading3:after {position: absolute;top: 24px;left: -2px;border-top: 5px solid #2161319f;border-right: 5px solid transparent;border-left: 5px solid transparent;content: "";transform: rotate(-30deg);
}.loading3:after {top: 0;left: 20.5px;transform: rotate(150deg);
}@keyframes arrow-circle {0% {transform: rotate(360deg);}100% {transform: rotate(0);}
}.loading4 {width: 50px;height: 50px;border-radius: 100%;background-color: #2161319f;animation: ball-scale infinite linear 0.75s;
}@keyframes ball-scale {0% {transform: scale(0.1);opacity: 1;}100% {transform: scale(1);opacity: 0;}
}.loading5 {position: relative;width: 40px;height: 40px;
}.loading5:before,
.loading5:after {position: absolute;width: 10px;height: 10px;content: "";border-radius: 100%;background-color: #2161319f;
}.loading5:before {transform: translate(0, 0);animation: ball-circle-before infinite 1.5s linear;
}.loading5:after {transform: translate(30px, 30px);animation: ball-circle-after infinite 1.5s linear;
}@keyframes ball-circle-after {0% {transform: translate(30px, 30px);}25% {transform: translate(0, 30px);}50% {transform: translate(0, 0);}75% {transform: translate(30px, 0);}100% {transform: translate(30px, 30px);}
}@keyframes ball-circle-before {0% {transform: translate(0, 0);}25% {transform: translate(30px, 0);}50% {transform: translate(30px, 30px);}75% {transform: translate(0, 30px);}100% {transform: translate(0, 0);}
}.loading6 {display: block;position: relative;width: 6px;height: 10px;animation: rectangle infinite 1s ease-in-out -0.2s;background-color: #2161319f;
}.loading6:before,
.loading6:after {position: absolute;width: 6px;height: 10px;content: "";background-color: #2161319f;
}.loading6:before {left: -14px;animation: rectangle infinite 1s ease-in-out -0.4s;
}.loading6:after {right: -14px;animation: rectangle infinite 1s ease-in-out;
}@keyframes rectangle {0%,80%,100% {height: 20px;box-shadow: 0 0 #2161319f;}40% {height: 30px;box-shadow: 0 -20px #2161319f;}
}.loading7 {position: relative;width: 100px;height: 90px;left: 10px;top: 10px;animation: heart infinite 0.85s linear;
}.loading7:before,
.loading7:after {position: absolute;top: 0;left: 30px;width: 30px;height: 50px;content: "";transform: rotate(-45deg);transform-origin: 0 100%;border-radius: 30px 30px 0 0;background: #2161319f;
}.loading7:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;
}@keyframes heart {0% {transform: scale(0.8);}50% {transform: scale(1);}100% {transform: scale(0.8);}
}.loading8 {margin: 20px;position: relative;width: 15px;height: 15px;border-radius: 100%;background-color: #2161319f;animation: ball-rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;animation-fill-mode: both;
}.loading8:before,
.loading8:after {position: absolute;width: 15px;height: 15px;margin: 2px;content: "";opacity: 0.8;border-radius: 100%;background-color: #2161319f;
}.loading8:before {top: 0;left: -28px;
}.loading8:after {top: 0;left: 25px;
}@keyframes ball-rotate {0% {transform: rotate(0deg) scale(1);}50% {transform: rotate(180deg) scale(0.6);}100% {transform: rotate(360deg) scale(1);}
}.loading9 {margin: 20px;position: relative;width: 1px;height: 1px;
}.loading9:before,
.loading9:after {position: absolute;display: inline-block;width: 15px;height: 15px;content: "";border-radius: 100%;background-color: #2161319f;
}.loading9:before {left: -15px;animation: ball-pulse infinite 0.75s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
}.loading9:after {right: -15px;animation: ball-pulse infinite 0.75s cubic-bezier(0.2, 0.68, 0.18, 1.08);
}@keyframes ball-pulse {0% {transform: scale(1);opacity: 1;}50% {transform: scale(0.4);opacity: 0.6;}100% {transform: scale(1);opacity: 1;}
}.loading10 {position: relative;width: 50px;perspective: 200px;
}.loading10:before,
.loading10:after {position: absolute;width: 20px;height: 20px;content: "";animation: jumping 0.5s infinite alternate;background: rgba(0, 0, 0, 0);
}.loading10:before {left: 0;
}.loading10:after {right: 0;animation-delay: 0.15s;
}@keyframes jumping {0% {transform: scale(1) translateY(0px) rotateX(0deg);box-shadow: 0 0 0 rgba(0, 0, 0, 0);}100% {transform: scale(1.2) translateY(-25px) rotateX(45deg);background: #2161319f;box-shadow: 0 25px 40px #2161319f;}
}.loading11 {position: relative;width: 48px;height: 48px;animation: satellite 3s infinite linear;border: 1px solid #2161319f;border-radius: 100%;
}.loading11:before,
.loading11:after {position: absolute;left: 1px;top: 1px;width: 12px;height: 12px;content: "";border-radius: 100%;background-color: #2161319f;box-shadow: 0 0 10px #2161319f;
}.loading11:after {right: 0;width: 20px;height: 20px;margin: 13px;
}@keyframes satellite {from {transform: rotate(0) translateZ(0);}to {transform: rotate(360deg) translateZ(0);}
}.loading12,
.loading12>view {position: relative;box-sizing: border-box;
}.loading12 {display: block;font-size: 0;color: #2161319f;margin: 30px;
}.loading12.la-dark {color: #333;
}.loading12>view {display: inline-block;float: none;background-color: currentColor;border: 0 solid currentColor;
}.loading12 {width: 18px;height: 18px;
}.loading12>view {position: absolute;width: 6px;height: 6px;border-radius: 0;opacity: 0;transform: translate(100%, 100%);animation: ball-8bits 1s 0s ease infinite;
}.loading12>view:nth-child(1) {animation-delay: -0.9375s;
}.loading12>view:nth-child(2) {animation-delay: -0.875s;
}.loading12>view:nth-child(3) {animation-delay: -0.8125s;
}.loading12>view:nth-child(4) {animation-delay: -0.75s;
}.loading12>view:nth-child(5) {animation-delay: -0.6875s;
}.loading12>view:nth-child(6) {animation-delay: -0.625s;
}.loading12>view:nth-child(7) {animation-delay: -0.5625s;
}.loading12>view:nth-child(8) {animation-delay: -0.5s;
}.loading12>view:nth-child(9) {animation-delay: -0.4375s;
}.loading12>view:nth-child(10) {animation-delay: -0.375s;
}.loading12>view:nth-child(11) {animation-delay: -0.3125s;
}.loading12>view:nth-child(12) {animation-delay: -0.25s;
}.loading12>view:nth-child(13) {animation-delay: -0.1875s;
}.loading12>view:nth-child(14) {animation-delay: -0.125s;
}.loading12>view:nth-child(15) {animation-delay: -0.0625s;
}.loading12>view:nth-child(16) {animation-delay: 0s;
}.loading12>view:nth-child(1) {top: -100%;left: 0;
}.loading12>view:nth-child(2) {top: -100%;left: 33.3333333333%;
}.loading12>view:nth-child(3) {top: -66.6666666667%;left: 66.6666666667%;
}.loading12>view:nth-child(4) {top: -33.3333333333%;left: 100%;
}.loading12>view:nth-child(5) {top: 0;left: 100%;
}.loading12>view:nth-child(6) {top: 33.3333333333%;left: 100%;
}.loading12>view:nth-child(7) {top: 66.6666666667%;left: 66.6666666667%;
}.loading12>view:nth-child(8) {top: 100%;left: 33.3333333333%;
}.loading12>view:nth-child(9) {top: 100%;left: 0;
}.loading12>view:nth-child(10) {top: 100%;left: -33.3333333333%;
}.loading12>view:nth-child(11) {top: 66.6666666667%;left: -66.6666666667%;
}.loading12>view:nth-child(12) {top: 33.3333333333%;left: -100%;
}.loading12>view:nth-child(13) {top: 0;left: -100%;
}.loading12>view:nth-child(14) {top: -33.3333333333%;left: -100%;
}.loading12>view:nth-child(15) {top: -66.6666666667%;left: -66.6666666667%;
}.loading12>view:nth-child(16) {top: -100%;left: -33.3333333333%;
}@keyframes ball-8bits {0% {opacity: 1;}50% {opacity: 1;}51% {opacity: 0;}
}.loading13,
.loading13>view {position: relative;box-sizing: border-box;
}.loading13 {display: block;font-size: 0;color: #2161319f;
}.loading13.la-dark {color: #333;
}.loading13>view {display: inline-block;float: none;background-color: currentColor;border: 0 solid currentColor;
}.loading13 {width: 16px;height: 16px;
}.loading13>view {position: absolute;top: 0;left: -100%;display: block;width: 16px;width: 100%;height: 16px;height: 100%;border-radius: 100%;opacity: 0.5;animation: ball-circus-position 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1),ball-circus-size 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
}.loading13>view:nth-child(1) {animation-delay: 0s, -0.5s;
}.loading13>view:nth-child(2) {animation-delay: -0.5s, -1s;
}.loading13>view:nth-child(3) {animation-delay: -1s, -1.5s;
}.loading13>view:nth-child(4) {animation-delay: -1.5s, -2s;
}.loading13>view:nth-child(5) {animation-delay: -2s, -2.5s;
}@keyframes ball-circus-position {50% {left: 100%;}
}@keyframes ball-circus-size {50% {transform: scale(0.3, 0.3);}
}.loading14,
.loading14>view {position: relative;box-sizing: border-box;
}.loading14 {display: block;font-size: 0;color: #2161319f;
}.loading14.la-dark {color: #333;
}.loading14>view {display: inline-block;float: none;background-color: currentColor;border: 0 solid currentColor;
}.loading14 {width: 42px;height: 32px;
}.loading14>view:nth-child(1) {position: absolute;bottom: 32%;left: 18%;width: 14px;height: 14px;border-radius: 100%;transform-origin: center bottom;animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
}.loading14>view:not(:nth-child(1)) {position: absolute;top: 0;right: 0;width: 14px;height: 2px;border-radius: 0;transform: translate(60%, 0);animation: ball-climbing-dot-steps 1.8s linear infinite;
}.loading14>view:not(:nth-child(1)):nth-child(2) {animation-delay: 0ms;
}.loading14>view:not(:nth-child(1)):nth-child(3) {animation-delay: -600ms;
}.loading14>view:not(:nth-child(1)):nth-child(4) {animation-delay: -1200ms;
}@keyframes ball-climbing-dot-jump {0% {transform: scale(1, 0.7);}20% {transform: scale(0.7, 1.2);}40% {transform: scale(1, 1);}50% {bottom: 125%;}46% {transform: scale(1, 1);}80% {transform: scale(0.7, 1.2);}90% {transform: scale(0.7, 1.2);}100% {transform: scale(1, 0.7);}
}@keyframes ball-climbing-dot-steps {0% {top: 0;right: 0;opacity: 0;}50% {opacity: 1;}100% {top: 100%;right: 100%;opacity: 0;}
}.loading15,
.loading15>view {position: relative;box-sizing: border-box;
}.loading15 {display: block;font-size: 0;color: #2161319f;
}.loading15.la-dark {color: #333;
}.loading15>view {display: inline-block;float: none;background-color: currentColor;border: 0 solid currentColor;
}.loading15 {width: 36px;height: 36px;
}.loading15>view {width: 8px;height: 8px;margin: 2px;border-radius: 100%;animation-name: ball-grid-beat;animation-iteration-count: infinite;
}.loading15>view:nth-child(1) {animation-duration: 0.65s;animation-delay: 0.03s;
}.loading15>view:nth-child(2) {animation-duration: 1.02s;animation-delay: 0.09s;
}.loading15>view:nth-child(3) {animation-duration: 1.06s;animation-delay: -0.69s;
}、、、

4.完整代码，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序loading加载动画相关推荐

  1. 微信小程序列表加载动画示例

    微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...

  2. 微信小程序Loading加载+提示框（微信小程序）

    效果演示 1.Loading加载界面 2.提示框 代码实现 1.Loading加载界面----方法1 应用场景:显示loading -> 你要做的事 -> 隐藏loading,缓解用户焦虑 ...

  3. 微信小程序分页加载列表

    微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多 组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...

  4. 微信小程序分包加载，分包加载的优势

    微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...

  5. 微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载

    微信小程序如何解决预览超过2M的问题?微信小程序分包加载 在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...

  6. 微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢

    - 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...

  7. 微信小程序踩坑日记-微信小程序首次加载样式错乱问题

    微信小程序踩坑日记-微信小程序首次加载样式错乱问题 在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题 问题原因:-未知(估计是组件的问题) ↓ 解决办 ...

  8. 微信小程序web-view加载网页字体非常小的问题

    一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...

  9. 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？

    微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...

最新文章

  1. mysql read timed out_java.sql.SQLException: Socket read timed out
  2. java重定向url怎么写_Java：如何从重定向的URL中读取内容？
  3. c语言实现万年历程序带节日,【C】万年历
  4. python abc
  5. 正则表达式的贪婪与非贪婪模式
  6. 【SCIR AAAI2021】数据增强没效果？试试用Cluster-to-Cluster生成更多样化的新数据吧...
  7. 死亡细胞Mod制作教程
  8. Android GPS定位（获取经纬度）
  9. html切图软件,切图工具/插件介绍
  10. 教你一个小技巧给latex表格添加脚注 (非footnote)
  11. hive Unexpected column vector type LIST
  12. 如何实现业务流程集成
  13. CentOS 7查看源代码
  14. 【环境配置】自定义Linux欢迎界面/etc/motd文件
  15. 第十三届蓝桥杯结束后感悟，也对自己大学写生活的一个简单复盘
  16. 计算机词汇店名,电脑店名字200例
  17. 如何做淘宝客推广淘宝客教程视频
  18. 华为hcie认证工程师里一定要知道的Radius 基本介绍
  19. 二年级课程表（3月7日-3月11日）
  20. Esri_Land_Cover_2020_10m的介绍与数据下载教程

热门文章

  1. 八代的cpu能装服务器系统吗,8代i5能不能装win7
  2. pivot position_UGUI中Anchor和Pivot详解
  3. 打造ReactNative脚手架工程 - Detox自动化测试
  4. 【CSDN 年终总结】结束与开始，一直在路上—— “1+1=王”的2021总结
  5. 使用C++模板获取数组长度
  6. 善良，诚恳必须在豪情狭义之下，保持原则
  7. 仿照利用android系统源码资源文件，修改SeekBar颜色 前景与背景
  8. 声音均衡器怎么调好听_均衡器如何调，音乐更好听
  9. popper.js 使用
  10. 终于明白老中医系统为何不成功了，同理手机算命该有多么不靠谱了