简单实现进度条效果(vue2)

如果用echarts或者其他图表来写个进度条有点大材小用,所以直接简单html、js写一下就可以;

以下代码基于vue2,

部分代码来自国内直连GPT/Claude镜像站

javascript 复制代码
<template>
  <div class="progress-container">
    <div class="progress-item" v-for="(item, index) in progressData" :key="index">
      <div class="label">{{ item.label }}</div>
      <div class="progress-bar">
        <div class="progress" :style="{ width: item.value + '%', backgroundColor: item.color }">
          <span class="value">{{ item.value }}%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressChart',
  data() {
    return {
      progressData: [
        { label: '当前值', value: 15, color: '#ff4757' },
        { label: '设计值', value: 8, color: '#2ed573' }
      ]
    }
  },
}
</script>

<style scoped>
.progress-container {
  background-color: #1e3a5f;
  padding: 10px;
}
.progress-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.label {
  width: 60px;
  color: #fff;
  font-size: 14px;
}
.progress-bar {
  flex-grow: 1;
  height: 20px;
  background-color: #2c4d6f;
  margin: 0 10px;
  position: relative;
}
.progress {
  height: 100%;
  transition: width 0.5s ease-in-out;
  position: relative;
}
.value {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 14px;
}
</style>
相关推荐
zzywxc78715 分钟前
AI 正在深度重构软件开发的底层逻辑和全生命周期,从技术演进、流程重构和未来趋势三个维度进行系统性分析
java·大数据·开发语言·人工智能·spring
灵性花火34 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
DES 仿真实践家1 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
Code Warrior2 小时前
【每日算法】专题五_位运算
开发语言·c++
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
沐知全栈开发5 小时前
HTML DOM 访问
开发语言
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
二进制person7 小时前
Java SE--方法的使用
java·开发语言·算法
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
OneQ6667 小时前
C++讲解---创建日期类
开发语言·c++·算法