Vue 实现渐变色的进度条：打造视觉惊艳的环形进度组件

在前端界面设计中，进度条是展示任务完成度的常用组件。Element UI 提供的环形进度条简洁实用，但默认样式较为单一。本文将详细介绍如何通过 Vue 结合 Element UI，打造具有渐变色效果的环形进度条，让你的界面交互更具视觉吸引力。

最终效果展示

一、基础实现：使用 Element UI 的环形进度条

Element UI 的el-progress组件提供了基础的环形进度条功能，我们可以通过简单配置快速搭建雏形：

<template>
  <div class="circle-chart">
    <!-- 环形进度条组件 -->
    <el-progress 
      type="circle" 
      class="percent" 
      :stroke-width="8" 
      :width="164"  
      :percentage="75"
      :show-text="false"
    >
    </el-progress>
    
    <!-- 中间显示内容 -->
    <div class="text-box">
      <p class="title">75%</p>
      <p class="text">进度</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GradientProgressBar',
  data() {
    return {
      percentage: 75 // 进度百分比
    }
  }
}
</script>

<style scoped>
.circle-chart {
  position: relative;
  display: inline-block;
}

.percent {
  position: relative;
  z-index: 1;
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.text {
  font-size: 14px;
  color: #666;
}
</style>

这段代码实现了基础的环形进度条结构：

• 通过type="circle"指定环形进度条
• stroke-width控制进度条粗细，width控制环形大小
• show-text="false"隐藏默认中间文字，便于自定义内容
• 使用绝对定位将text-box居中显示在环形正中间

二、核心改造：为进度条添加渐变色效果

要实现渐变色进度条，需要借助 SVG 的线性渐变（linearGradient）功能，并修改进度条的样式：

<template>
  <div class="circle-chart">
    <!-- 渐变定义（隐藏显示） -->
    <div style="width:0px; height: 0px; position: absolute;">
      <svg width="100%" height="100%">
        <defs>
          <!-- 蓝色系渐变：从浅蓝到深蓝 -->
          <linearGradient id="blueColor" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#00FFF0; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#2D55E3; stop-opacity:1"></stop>
          </linearGradient>
          <!-- 可扩展其他渐变色 -->
          <linearGradient id="greenColor" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:#52C41A; stop-opacity:1"></stop>
            <stop offset="100%" style="stop-color:#006400; stop-opacity:1"></stop>
          </linearGradient>
        </defs>
      </svg>
    </div>
    
    <!-- 环形进度条组件 -->
    <el-progress 
      type="circle" 
      class="percent" 
      :stroke-width="8" 
      :width="164"  
      :percentage="percentage"
      :show-text="false"
    >
    </el-progress>
    
    <!-- 中间显示内容 -->
    <div class="text-box">
      <p class="title">{{ percentage }}%</p>
      <p class="text">进度</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GradientProgressBar',
  data() {
    return {
      percentage: 75 // 进度百分比
    }
  }
}
</script>

<style scoped>
.circle-chart {
  position: relative;
  display: inline-block;
}

.percent {
  position: relative;
  z-index: 1;
}

/* 改造进度条样式 */
.percent .el-progress-circle .el-progress-circle__track {
  stroke: transparent; /* 轨道颜色设为透明 */
}

.percent .el-progress-circle .el-progress-circle__path {
  stroke: url(#blueColor); /* 进度条颜色使用渐变 */
  transition: stroke-dashoffset 0.5s ease-in-out; /* 动画过渡效果 */
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.text {
  font-size: 14px;
  color: #666;
}
</style>

三、关键技术解析

1. 渐变色的实现原理

通过 SVG 的<linearGradient>标签定义线性渐变，核心属性包括：

• id：渐变的唯一标识，用于后续引用
• x1/y1和x2/y2：渐变的起始和结束坐标，0% 0%表示从左到右
• <stop>标签：定义渐变的颜色节点
  • offset：颜色位置（0% 为起始，100% 为结束）
  • stop-color：颜色值
  • stop-opacity：透明度

2. 进度条样式修改

通过 CSS 选择器覆盖 Element UI 的默认样式：

• .el-progress-circle__track：进度条的背景轨道，设为透明
• .el-progress-circle__path：进度条的填充部分，使用stroke: url(#blueColor)引用渐变

四、完整应用场景示例

<template>
  <div class="progress-demo">
    <h3>渐变色环形进度条演示</h3>
    
    <div class="control-panel">
      <el-slider 
        v-model="percentage" 
        :min="0" 
        :max="100" 
        :step="5"
        show-input
        input-size="small"
      ></el-slider>
      
      <div class="button-group">
        <el-button @click="setRandomProgress">随机进度</el-button>
        <el-button type="primary" @click="startAnimation">动画演示</el-button>
      </div>
    </div>
    
    <div class="progress-container">
      <GradientProgressBar 
        ref="progressBar"
        :percentage="percentage"
      />
    </div>
  </div>
</template>

<script>
import GradientProgressBar from './GradientProgressBar.vue';

export default {
  name: 'ProgressDemo',
  components: {
    GradientProgressBar
  },
  data() {
    return {
      percentage: 30
    }
  },
  methods: {
    setRandomProgress() {
      this.percentage = Math.floor(Math.random() * 101);
    },
    
    startAnimation() {
      let current = 0;
      const interval = setInterval(() => {
        current += 5;
        if (current > 100) {
          current = 0;
        }
        this.percentage = current;
        
        if (current === 100) {
          clearInterval(interval);
        }
      }, 200);
    }
  }
}
</script>

<style scoped>
.progress-demo {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.control-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.progress-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>

通过以上步骤，你可以在 Vue 项目中轻松实现视觉精美的渐变色环形进度条，为用户提供更直观、更具吸引力的进度展示效果。根据实际需求，还可以进一步扩展功能，如添加进度动画、多进度条联动或响应式适配等。