前端实现不规则进度条

背景：在只能使用js css的页面开发中，遇到进度条这种elementUI有封装好的组件但是又不能实用得时候就会特别难受，所以把已经写好的一个进度条直接记下来，方便以后使用

先看效果：

分别有50万（0%）、100万（20%）、150万（40%）、200万（60%）、300万（80%）、500万（100%）这几个节点， 50 - 200的每个节点差值都是50，200~300差值则是100， 假如当前是280，因为差值不规则的原因，不能通过280/500来计算，只能通过分阶段计算的方式。

  
// 计算进度条百分比
function calculateProgress (sumData) {
    //先定义节点
    const points = [500000, 1000000, 1500000, 2000000, 3000000, 5000000];
    for (let i = 0; i < points.length - 1; i++) {
        if (sumData >= points[i] && sumData <= points[i + 1]) {
            let progress = ((sumData - points[i]) / (points[i + 1] - points[i])) * (100 / (points.length - 1));
            return (i * (100 / (points.length - 1))) + progress;
        }
    }
    return sumData >= points[points.length - 1] ? 100 : 0;
}

// 示例：sumData = 2800000
console.log(calculateProgress(2800000)); // 输出进度条上的百分比