当前位置：首页 > VUE

vue实现水波球进度条

2026-02-09 21:29:59VUE

Vue 实现水波球进度条

使用 SVG 和动态计算

在 Vue 中实现水波球进度条，可以通过 SVG 结合动态计算波浪效果。以下是一个基于 Vue 3 的实现方法：

<template>
  <div class="wave-ball">
    <svg viewBox="0 0 100 100" class="wave-svg">
      <defs>
        <clipPath id="wave-clip">
          <path :d="wavePath" fill="none" stroke="none" />
        </clipPath>
      </defs>
      <circle cx="50" cy="50" r="45" fill="#e0e0e0" />
      <circle cx="50" cy="50" r="45" fill="#4a90e2" clip-path="url(#wave-clip)" />
    </svg>
    <div class="progress-text">{{ progress }}%</div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const progress = ref(75)
    const animationOffset = ref(0)

    const wavePath = computed(() => {
      const amplitude = 5
      const frequency = 0.02
      const height = 100 - progress.value
      let path = `M 0 ${height}`

      for (let x = 0; x <= 100; x++) {
        const y = amplitude * Math.sin(x * frequency + animationOffset.value) + height
        path += ` L ${x} ${y}`
      }

      path += ` L 100 100 L 0 100 Z`
      return path
    })

    onMounted(() => {
      setInterval(() => {
        animationOffset.value += 0.1
      }, 100)
    })

    return { progress, wavePath }
  }
}
</script>

<style>
.wave-ball {
  position: relative;
  width: 200px;
  height: 200px;
}

.wave-svg {
  width: 100%;
  height: 100%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
</style>

使用第三方库

对于更复杂的效果或简化开发，可以使用专门的水波球组件库：

安装 vue-wave-progress 库：
```
npm install vue-wave-progress
```

在组件中使用：


<template>
<wave-progress 
 :progress="progress" 
 :options="waveOptions"
/>
</template>

import WaveProgress from 'vue-wave-progress'

export default { components: { WaveProgress }, data() { return { progress: 65, waveOptions: { waveHeight: 10, waveAnimation: true, color: '#3a7bd5', textColor: '#333' } } } }

vue实现水波球进度条

```

CSS 动画增强效果

可以通过 CSS 动画增强水波动画效果：

.wave-animation {
  animation: wave 3s infinite linear;
}

@keyframes wave {
  0% { transform: translateX(0) translateZ(0) scaleY(1); }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.9); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

将动画应用到 SVG 的波浪路径上，可以实现更流畅的波浪运动效果。

响应式设计

确保水波球在不同设备上正常显示：

@media (max-width: 768px) {
  .wave-ball {
    width: 150px;
    height: 150px;
  }

  .progress-text {
    font-size: 18px;
  }
}

以上方法提供了从基础实现到使用第三方库的不同方案，可根据项目需求选择合适的方式。SVG 方案提供更多自定义灵活性，而第三方库则简化了开发流程。

标签: 水波进度条

分享给朋友：

jquery进度条

jQuery 进度条实现方法使用 HTML5 <progress> 元素结合 jQuery <progress id="fileProgress" value="0" max="1…

css制作网格进度条

使用CSS Grid布局制作网格进度条通过CSS Grid布局可以轻松创建网格进度条。定义一个容器元素作为网格，子元素表示进度块。 <div class="grid-progress">…

js实现加载进度条

使用XMLHttpRequest监听进度事件通过XMLHttpRequest对象的progress事件可以获取文件加载进度。创建一个进度条div，根据事件中的loaded和total属性更新进度条宽…

php实现的进度条

PHP 实现的进度条方法使用 HTML 和 CSS 结合 PHP 通过 PHP 生成 HTML 和 CSS 代码，动态显示进度条。这种方法适用于网页端展示。 <?php $progress…

vue水波球实现

Vue 水波球实现方法水波球（也称为波浪球或液体填充效果）通常用于数据可视化或进度展示。以下是基于 Vue 的实现方法，结合 Canvas 或 SVG 技术。使用 Canvas 实现通过 Ca…

vue实现水波球进度条