progress steps

1.

:root {
  --line-border-fill:#3498db;
  --line-border-empty: #e0e0e0;
}

:root{}    声明全局CSS变量

使用：

 background-color: var(--line-border-empty);

2.将流程线置于圆形框的下边

z-index:-1;

3.对按钮的设置，点击，焦点，不能使用

.btn:active{
  transform: scale(0.98);
}
.btn:focus {
  outline: 0;
}
.btn:disabled {
  background-color: var(--line-border-empty);
  cursor: not-allowed;
}

4.添加事件监听事件，addEventListener

let currentActive = 1
next.addEventListener('click',()=>{
    currentActive++
    if(currentActive>circles.length){
        currentActive = circles.length
    }
    update()
})

function update(){
    circles.forEach((circle,idx)=>{
        if(idx<currentActive){
            circle.classList.add('active')
        }else{
            circle.classList.remove('active')
        }
    })
    const actives=document.querySelectorAll('.active')
    progress.style.width = (actives.length-1)/(circles.length-1)*100+'%'
    if(currentActive === 1){
        prev.disabled=true
    }else if(currentActive === circles.length){
        next.disabled = true
    }else{
        prev.disabled = false
        next.disabled = false
    }
}