更新记录

1.0.0（2025-09-25） 下载此版本

版本提交

平台兼容性

加载动效组件库（uni-app / Vue 2）

本项目提供一组基于 CSS 的轻量级加载动效，封装为 uni-app 的 Vue 单文件组件。每个组件都内聚、无外部依赖，通过简单的颜色类 props 可自定义样式。

使用方式

在需要的页面或组件内按需引入并注册，然后在模板中使用。示例节选自 pages/index/index.vue：

<template>
  <view>
    <RingLine :lineColor="'red'" :ringColor="'#eb8f8f'" />
    <RingArrow />
    <BallScale :color="'tomato'" />
    <BallCircle :afterColor="'red'" :beforeColor="'skyblue'" />
  </view>

import RingLine from '@/components/ring_line.vue'
import RingArrow from '@/components/ring_arrow.vue'
import BallScale from '@/components/ball_scale.vue'
import BallCircle from '@/components/ball_circle.vue'

export default {
  components: { RingLine, RingArrow, BallScale, BallCircle }
}

尺寸由各组件内的 CSS 控制；颜色可通过 props 定制，详见下表。

组件一览

以下列出全部组件、其 props 及默认值，并附最小用例：

1) ring_line（components/ring_line.vue）

• Props：
  • lineColor: String = '#000'
  • ringColor: String = 'rgba(0, 0, 0, 0.2)'
• 用法：

  <RingLine :lineColor="'#222'" :ringColor="'rgba(0,0,0,0.2)'" />

2) ring_arrow（components/ring_arrow.vue）

• Props：无
• 用法：

  <RingArrow />

3) ball_scale（components/ball_scale.vue）

• Props：
  • color: String = '#000'
• 用法：

  <BallScale color="tomato" />

4) ball_circle（components/ball_circle.vue）

• Props：
  • afterColor: String = '#000'
  • beforeColor: String = '#000'
• 用法：

  <BallCircle afterColor="red" beforeColor="skyblue" />

5) rect_angle（components/rect_angle.vue）

• Props：
  • color: String = '#000'
• 用法：

  <RectAngle color="tomato" />

6) heart（components/heart.vue）

• Props：
  • color: String = '#000'
• 用法：

  <Heart color="tomato" />

7) ball_rotate（components/ball_rotate.vue）

• Props：
  • color1: String = '#000'
  • color2: String = '#000'
  • color3: String = '#000'
• 用法：

  <BallRotate color1="tomato" color2="tomato" color3="tomato" />

8) ball_pulse（components/ball_pulse.vue）

• Props：
  • color: String = '#000'
• 用法：

  <BallPluse color="tomato" />

9) ball_run（components/ball_run.vue）

• Props：
  • color: String = '#000'
• 用法：

  <BallRun color="tomato" />

10) ball_grid（components/ball_grid.vue）

• Props：
  • color: String = '#000'
• 用法：

  <BallGrid color="tomato" />

11) ball_clip（components/ball_clip.vue）

• Props：
  • centerColor: String = '#000'
  • lineColor: String = '#000'
• 用法：

  <BallClip centerColor="tomato" lineColor="skyblue" />

12) dot_jump（components/dot_jump.vue）

• Props：
  • floorColor: String = '#aaa'
  • ballColor: String = '#000'
• 用法：

  <DotJump ballColor="tomato" floorColor="#ddd" />

13) ball_atom（components/ball_atom.vue）

• Props：
  • centerColor: String = '#aaa'
  • ballColor: String = '#000'
• 用法：

  <BallAtom centerColor="tomato" ballColor="skyblue" />

14) sate_llite（components/sate_llite.vue）

• Props：
  • centerColor: String = '#000'
  • lineColor: String = '#000'
  • ballColor: String = '#000'
• 用法：

  <SateLlite centerColor="tomato" lineColor="yellow" ballColor="green" />

15) rect_jump（components/rect_jump.vue）

• Props：
  • color: String = '#000'
  • bgColor: String = '#000'
• 用法：

  <RectJump color="red" bgColor="tomato" />

16) ball_fussion（components/ball_fussion.vue）

• Props：
  • color: String = '#000'
• 用法：

  <BallFussion color="tomato" />

17) color_rotate（components/color_rotate.vue）

• Props：
  • topColor: String = 'rgba(254, 168, 23, 0.65)'
  • bottomColor: String = 'rgba(57, 154, 219, 0.65)'
  • leftColor: String = 'rgba(188, 84, 93, 0.95)'
  • rightColor: String = 'rgba(137, 188, 79, 0.95)'
• 用法：

  <ColorRotate topColor="#f39" bottomColor="#39f" leftColor="#b55" rightColor="#8cB" />

18) clock（components/clock.vue）

• Props：
  • bColor: String = '#000' （外环/边框）
  • hColor: String = '#000' （时针）
  • mColor: String = '#000' （分针）
• 用法：

  <Clock hColor="tomato" bColor="#333" mColor="#999" />

19) square_jelly（components/square_jelly.vue）

• Props：
  • color: String = '#000'
• 用法：

  <SquareJelly color="tomato" />

20) square_loader（components/square_loader.vue）

• Props：
  • bgcolor: String = '#000'
  • bColor: String = '#000'
• 用法：

  <SquareLoader bgcolor="#09f" bColor="#09f" />

21) text_defined_col（components/text_defined_col.vue）

• Props：
  • text: String = 'Loading'
  • tColor: String = '#ff3d00'
  • tShadow: String = '#ff3d00'
• 用法：

  <TextDefinedCol text="Loading" tColor="#ff3d00" tShadow="#ff3d00" />

22) text_defined（components/text_defined.vue）

• Props：
  • text: String = 'Loading'
  • tColor: String = '#ff3d00'
  • tShadow: String = '#ff3d00'
• 用法：

  <TextDefined text="Loading" tColor="#ff3d00" tShadow="#ff3d00" />

23) rotate_back（components/rotate_back.vue）

• Props：
  • aColor: String = '#ddd'
  • bColor: String = '#ff3d00'
  • cColor: String = '#ddd'
• 用法：

  <RotateBack aColor="#ddd" bColor="tomato" cColor="#ddd" />

说明

• 组件基于 uni-app 的 view 标签实现，可跨端使用。
• 颜色 props 接受任意合法 CSS 颜色（名称、十六进制、rgb/rgba 等）。
• 示例页面 pages/index/index.vue 展示了更多组合与实用示例，建议参考。