以下是一个使用HTML、CSS和JavaScript创建步骤进度条的示例代码：

HTML代码：

  
Step 1
  
Step 2
  
Step 3
  
Step 4

CSS代码：

.progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  height: 40px;
  background-color: #ccc;
  border-radius: 20px;
  padding: 5px;
}

.step {
  width: 75px;
  height: 30px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step.active {
  background-color: #007bff;
  color: #fff;
}

JavaScript代码：

const steps = document.querySelectorAll('.step');

steps.forEach((step, index) => {
  step.addEventListener('click', () => {
    updateProgress(index);
  });
});

function updateProgress(selectedIndex) {
  steps.forEach((step, index) => {
    if (index <= selectedIndex) {
      step.classList.add('active');
    } else {
      step.classList.remove('active');
    }
  });
}

这个示例中，我们使用flex布局创建了一个进度条的容器，并在容器中放置了几个步骤。每个步骤都是一个带有文本的div元素，并且在点击时会更新进度条的状态。

CSS样式用于设置进度条和步骤的外观，包括背景颜色、边框、圆角等。

JavaScript代码用于处理点击事件，当点击某个步骤时，会调用updateProgress函数来更新进度条的状态。在updateProgress函数中，我们遍历所有的步骤，并根据其索引与选中的步骤索引进行比较，添加或移除active类来设置步骤的激活状态。

你可以根据需要修改HTML、CSS和JavaScript代码来适应你的实际情况。