更新记录

1.0.0（2025-11-14）

✨ 发布59种炫酷加载动画组件库

平台兼容性

uni-app(3.6.14)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	√	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√

uni-app x(3.6.14)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
√	√	√	√	√	√

其他

多语言	暗黑模式	宽屏模式
×	×	√

🎨 炫酷加载动画集合

一套精心设计的 60 种炫酷加载动画效果，完美兼容微信小程序、H5 和 App 端。

✨ 特性

🎯 60种独特动画 - 涵盖科技、自然、物理、宇宙等多种主题
🚀 纯CSS3实现 - 无需额外依赖，性能出色
📱 全平台兼容 - 微信小程序 / H5 / iOS / Android
🎨 响应式设计 - 使用 rpx 单位，完美适配各种屏幕
💫 流畅动画 - 精心调优的动画曲线和时序
🔧 模块化设计 - 每个组件独立，可单独使用
🎪 交互式预览 - 内置切换控制，实时查看效果

📦 项目结构

loading/
├── components/          # 加载动画组件
│   ├── awesome-loading/
│   │   └── awesome-loading.vue # 3D能量环
│   ├── LoadingWave.vue         # 波浪律动
│   ├── LoadingCircle.vue       # 脉冲圆环
│   ├── LoadingGradient.vue     # 渐变旋转
│   ├── LoadingParticles.vue    # 粒子上升
│   ├── LoadingProgress.vue     # 进度条
│   ├── LoadingCube.vue         # 3D立方体
│   ├── LoadingDNA.vue          # DNA螺旋
│   ├── LoadingRipple.vue       # 水波纹
│   ├── LoadingNeon.vue         # 霓虹灯
│   ├── LoadingGalaxy.vue       # 星空宇宙
│   ├── LoadingMatrix.vue       # 黑客帝国
│   ├── LoadingHeart.vue        # 爱心跳动
│   ├── LoadingRadar.vue        # 雷达扫描
│   ├── LoadingDiamond.vue      # 钻石闪耀
│   ├── LoadingInfinity.vue     # 无限循环
│   ├── LoadingHexagon.vue      # 蜂巢网络
│   ├── LoadingQuantum.vue      # 量子态
│   ├── LoadingWormhole.vue     # 虫洞穿越
│   ├── LoadingSpiral.vue       # 螺旋星系
│   ├── LoadingMagic.vue        # 魔法阵
│   ├── LoadingVortex.vue       # 漩涡旋转
│   ├── LoadingHourglass.vue    # 时光沙漏
│   ├── LoadingConstellation.vue # 星座连线
│   ├── LoadingCompass.vue      # 指南针
│   ├── LoadingOrbital.vue      # 行星轨道
│   ├── LoadingWaveform.vue     # 音频波形
│   ├── LoadingAtom.vue         # 原子结构
│   ├── LoadingPlasma.vue       # 等离子体
│   ├── LoadingCrystal.vue      # 水晶旋转
│   ├── LoadingEnergy.vue       # 能量聚合
│   ├── LoadingPortal.vue       # 传送门
│   ├── LoadingNebula.vue       # 星云漂浮
│   ├── LoadingLaser.vue        # 激光扫描
│   ├── LoadingCosmic.vue       # 宇宙脉冲
│   ├── LoadingSonic.vue        # 声波震荡
│   ├── LoadingMagnet.vue       # 磁场效应
│   ├── LoadingFusion.vue       # 核聚变
│   ├── LoadingCircuit.vue      # 电路脉冲
│   ├── LoadingTornado.vue      # 龙卷风暴
│   ├── LoadingHologram.vue     # 全息投影
│   ├── LoadingShield.vue       # 能量护盾
│   ├── LoadingParticleSys.vue  # 粒子系统
│   ├── LoadingBlackhole.vue    # 黑洞吸积
│   ├── LoadingTesla.vue        # 特斯拉线圈
│   ├── LoadingMolecule.vue     # 分子结构
│   ├── LoadingCyber.vue        # 赛博网格
│   ├── LoadingPhoton.vue       # 光子流动
│   ├── LoadingQuasar.vue       # 类星体
│   ├── LoadingDimension.vue    # 维度空间
│   ├── LoadingPulse.vue        # 脉冲心跳
│   ├── LoadingBeam.vue         # 扫描光束
│   ├── LoadingGravity.vue      # 重力井
│   ├── LoadingOrbitPlanet.vue  # 行星轨道系统
│   ├── LoadingWaterRipple.vue  # 水波涟漪
│   ├── LoadingFlame.vue        # 火焰燃烧
│   ├── LoadingTide.vue         # 潮汐波动
│   ├── LoadingSpark.vue        # 电火花
│   ├── LoadingHelix.vue        # 双螺旋
│   ├── LoadingComet.vue        # 彗星划过
│   ├── LoadingThunder.vue      # 雷电风暴
│   ├── LoadingClock.vue        # 时光流转
│   ├── LoadingSnowflake.vue    # 雪花飘落
│   ├── LoadingAuroraBand.vue   # 极光飘带
│   ├── LoadingRadarScan.vue    # 雷达扫描系统
│   ├── LoadingLens.vue         # 光学透镜
│   ├── LoadingKaleidoscope.vue # 万花筒
│   ├── LoadingMeteor.vue       # 流星雨
│   ├── LoadingBubble.vue       # 气泡上升
│   ├── LoadingEclipse.vue      # 日食现象
│   ├── LoadingVortexSpiral.vue # 时空漩涡
│   └── LoadingFractal.vue      # 分形递归
├── pages/
│   └── index/
│       └── index.vue    # 主页面（动画展示）
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

🎬 动画分类

🌊 自然元素系列

波浪律动、水波纹、水波涟漪
火焰燃烧、潮汐波动
雪花飘落、气泡上升
龙卷风暴、雷电风暴

🌌 宇宙科幻系列

星空宇宙、星云漂浮、星座连线
虫洞穿越、传送门、黑洞吸积
类星体、行星轨道、彗星划过
流星雨、日食现象

⚡ 能量科技系列

3D能量环 (Awesome Loading) - 多层旋转能量环 + 粒子轨道系统
能量聚合、能量护盾、脉冲心跳
激光扫描、扫描光束、雷达扫描
电路脉冲、特斯拉线圈
磁场效应、核聚变、等离子体

🔬 物理结构系列

原子结构、分子结构、DNA螺旋
双螺旋、量子态、维度空间
粒子系统、光子流动、声波震荡
重力井、时空漩涡

💎 几何图形系列

钻石闪耀、水晶旋转、3D立方体
蜂巢网络、六边形、分形递归
无限循环、螺旋星系、漩涡旋转
万花筒

🎨 光影效果系列

渐变旋转、霓虹灯、极光飘带
光学透镜、全息投影、赛博网格

🎯 特殊效果系列

黑客帝国、魔法阵、时光沙漏
时光流转、爱心跳动、指南针
音频波形

🚀 快速开始

1. 单独使用某个组件

<template>
  <view>
    <awesome-loading text="加载中..." />
  </view>
</template>

<script>
import AwesomeLoading from '@/components/awesome-loading/awesome-loading.vue'

export default {
  components: {
    AwesomeLoading
  }
}
</script>

或者使用其他组件:

<template>
  <view>
    <LoadingWave />
  </view>
</template>

<script>
import LoadingWave from '@/components/LoadingWave.vue'

export default {
  components: {
    LoadingWave
  }
}
</script>

2. 动态切换组件

<template>
  <view>
    <component :is="currentLoading" />
    <button @click="changeLoading">切换效果</button>
  </view>
</template>

<script>
import LoadingWave from '@/components/LoadingWave.vue'
import LoadingCircle from '@/components/LoadingCircle.vue'

export default {
  components: {
    LoadingWave,
    LoadingCircle
  },
  data() {
    return {
      currentLoading: 'LoadingWave'
    }
  },
  methods: {
    changeLoading() {
      this.currentLoading = this.currentLoading === 'LoadingWave' 
        ? 'LoadingCircle' 
        : 'LoadingWave'
    }
  }
}
</script>

3. 作为全局 Loading 使用

<template>
  <view>
    <view v-if="isLoading" class="loading-mask">
      <LoadingAtom />
    </view>
    <view v-else>
      <!-- 你的内容 -->
    </view>
  </view>
</template>

<script>
import LoadingAtom from '@/components/LoadingAtom.vue'

export default {
  components: {
    LoadingAtom
  },
  data() {
    return {
      isLoading: true
    }
  },
  onLoad() {
    // 模拟加载数据
    setTimeout(() => {
      this.isLoading = false
    }, 2000)
  }
}
</script>

<style scoped>
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
</style>

🎨 自定义样式

每个组件都支持通过修改其内部样式来自定义外观：

<!-- 修改 LoadingWave.vue 中的颜色 -->
<style scoped>
.wave-bg { 
  background: linear-gradient(135deg, #your-color-1, #your-color-2); 
}
.wave { 
  background: your-wave-color; 
}
</style>

🛠️ 技术栈

框架: uni-app (Vue 2)
样式: 纯 CSS3 动画
单位: rpx (响应式像素)
动画: @keyframes + transform + filter

📱 兼容性

平台	支持情况	说明
微信小程序	✅ 完美支持	所有动画经过测试
H5	✅ 完美支持	支持所有现代浏览器
App (iOS)	✅ 完美支持	流畅运行
App (Android)	✅ 完美支持	流畅运行

🎯 性能优化

✅ 使用 CSS3 硬件加速（transform, opacity）
✅ 避免使用 JavaScript 动画
✅ 合理使用 will-change
✅ 独立的 scoped 样式，避免样式污染
✅ 使用 rpx 单位，自动适配屏幕

📝 使用建议

选择合适的动画: 根据应用场景选择对应主题的动画
控制数量: 页面中同时显示的动画组件不要超过3个
加载时机: 在数据请求前显示，请求完成后隐藏
用户体验: 加载时间过长时，考虑添加进度提示或超时处理
性能监控: 在低端设备上测试动画性能

🎁 特色功能

🌟 精选推荐: Awesome Loading

3D能量环加载动画 - 项目中最炫酷的加载效果！

特点:

🌀 三层旋转能量环（外、中、内层，不同速度和方向）
✨ 12个环绕粒子轨迹系统
💎 发光中心核心 + 脉冲动画
📊 动态进度条（0-100%）
🌈 渐变色彩搭配（青蓝→紫色→品红→橙色）
💫 多层光晕和阴影效果
🎨 深色科技感背景 + 动态网格

使用场景: 适合科技产品、游戏应用、高端展示页面

交互式预览系统

左右箭头切换动画效果
实时显示当前动画名称
页码指示器（当前/总数）
流畅的过渡效果

完善的动画效果

多层次动画叠加
3D 透视变换
渐变色彩应用
滤镜特效（模糊、亮度等）
粒子系统模拟
实时进度显示

🔧 开发指南

添加新的加载动画

在 components/ 目录创建新组件：

<template>
  <view class="loading-base your-effect-bg">
    <!-- 你的动画结构 -->
    <view class="your-element"></view>
    <text class="loading-text">动画名称</text>
  </view>
</template>

<script>
export default { 
  name: 'LoadingYourEffect' 
}
</script>

<style scoped>
.loading-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.loading-text {
  margin-top: 60rpx;
  font-size: 36rpx;
  color: #fff;
  font-weight: bold;
  letter-spacing: 6rpx;
}
/* 你的样式和动画 */
</style>

在 pages/index/index.vue 中导入并注册
添加到 components 和 effectNames 数组

🎉 致谢

感谢所有为这个项目提供灵感和建议的开发者！

⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！

炫酷加载动画组件库 加载动画 UI组件 特效 CSS3 炫酷