水波纹效果进度条

效果图：

效果图

实现：

 <div class="wave-con">
      <!-- 容器 -->
      <div class="main">
        <!-- 百分比 -->
        <div class="number">{{ percent }}</div>
        <!-- 水波效果 -->
        <div ref="wave" class="wave"></div>
      </div>
      <!-- 进度条 -->
      <el-slider v-model="percent" class="percent-bar" />
    </div>

const percent = ref(50);
const wave = ref(null);

// 监听百分比，计算 top
watch(
  percent,
  (v) => {
    const waveEle = wave.value;
    if (waveEle) {
      waveEle.style.top = `${200 * (1 - v / 100)}px`;
    }
  },
  {
    immediate: true,
  }
);

.wave-con {
  display: flex;
  flex-direction: column;
  align-items: center;

  .main {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #f1c3c3;
    border: #fff solid 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    // 增加样式隐藏溢出
    overflow: hidden;

    .number {
      font-size: 100px;
      z-index: 1;
      user-select: none;
    }
  }

  @keyframes rotateAnimation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .wave {
    position: absolute;
    top: 200px;
    width: 400px;
    height: 400px;
    background: rgb(168, 168, 231);
    border-radius: 40%;
    animation: rotateAnimation 2s linear infinite;
  }

  .percent-bar {
    width: 200px;
    background: #fff;
  }
}