以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript创建一个表单进度条。

HTML代码：

  




  姓名:
  
  
  邮箱:
  
  
  密码:
  
  
  

CSS代码：

.progress-bar {
  background-color: #f0f0f0;
  height: 10px;
  margin-bottom: 10px;
}

.progress {
  background-color: #4caf50;
  height: 100%;
  width: 0;
  transition: width 0.5s;
}

JavaScript代码：

var form = document.getElementById('myForm');
var progressBar = document.querySelector('.progress');

form.addEventListener('submit', function(event) {
  event.preventDefault();
  var inputs = form.querySelectorAll('input[required]');
  var filledInputs = Array.from(inputs).filter(function(input) {
    return input.value.trim() !== '';
  });
  var progress = (filledInputs.length / inputs.length) * 100;
  progressBar.style.width = progress + '%';
});

这个示例中，我们创建了一个表单进度条，使用CSS设置了进度条的样式。然后，使用JavaScript监听表单的提交事件，计算填写了多少个必填项，并根据填写的比例更新进度条的宽度。