Fox Animations Vue

一个精美的 Vue.js 加载动画组件集合，支持自定义颜色和尺寸。

特性

• 🎨 24种精美动画 - 包含多种风格的加载动画
• 🌈 颜色自定义 - 支持全局和局部加载色配置
• 🔧 灵活配置 - 全局注册时配置，局部使用时配置
• 📱 Vue 3 支持 - 完全兼容 Vue 3
• 🎯 按需导入 - 支持按需导入和全局注册

安装

npm install fox-animations-vue

使用方法

全局注册

import { createApp } from 'vue'
import FoxAnimations from 'fox-animations-vue'
import App from './App.vue'

const app = createApp(App)

// 全局注册，可配置默认加载色
app.use(FoxAnimations, {
  loadingColor: '#61E8EA'      // 默认加载色
})

app.mount('#app')

局部导入

<template>
  <div>
    <!-- 使用默认配置 -->
    <Load_1 />
    
    <!-- 使用局部配置 -->
    <FoxAnimationsConfig 
      loadingColor="#00ff00"
    >
      <Load_2 />
    </FoxAnimationsConfig>
  </div>
</template>

<script>
import { Load_1, Load_2, FoxAnimationsConfig } from 'fox-animations-vue'

export default {
  components: {
    Load_1,
    Load_2,
    FoxAnimationsConfig
  }
}
</script>

动态更新配置

import { updateConfig, getConfig } from 'fox-animations-vue'

// 获取当前配置
console.log(getConfig())

// 更新配置
updateConfig({
  loadingColor: '#ff6600'
})

CSS 变量

组件会自动设置以下 CSS 变量，你也可以在样式中直接使用：

:root {
  --fox-loading-color: #61E8EA; /* 加载色 */
}

组件列表

加载动画 (Load_X)

• Load_1 / load_1 - 旋转圆环
• Load_2 / load_2 - 点阵动画
• Load_3 / load_3 - 方块旋转
• Load_4 / load_4 - 脉冲动画
• Load_5 / load_5 - 九点闪烁
• Load_6 / load_6 - 波浪动画
• Load_7 / load_7 - 圆形进度
• Load_8 / load_8 - 线条动画
• Load_9 / load_9 - 3D旋转
• Load_10 / load_10 - 弹跳球
• Load_11 / load_11 - 柱状图
• Load_12 / load_12 - 圆形脉冲
• Load_13 / load_13 - 双点旋转
• Load_14 / load_14 - 方形旋转
• Load_15 / load_15 - 圆形加载
• Load_16 / load_16 - 阴影动画
• Load_17 / load_17 - 渐变圆环
• Load_18 / load_18 - 线条旋转
• Load_19 / load_19 - 双环旋转
• Load_20 / load_20 - 吃豆人

其他动画

• Battery / battery - 电池充电
• Help / help - 帮助图标
• Timer / timer - 时钟动画
• SkCircle / skCircle - 圆形加载

配置选项

全局配置 (app.use)

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | loadingColor | String | #61E8EA | 加载颜色 |

局部配置 (FoxAnimationsConfig)

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | loadingColor | String | #61E8EA | 加载颜色 |

使用命名导出的 install（可选）

import { install } from 'fox-animations-vue'

const app = createApp(App)
app.use(install, {
  loadingColor: '#61E8EA'
})

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm run test

许可证

MIT