如何使用CSS在进度条的中心添加文本，并根据进度值对其进行着色？

<div class="progress-bar">
  <div class="progress" style="width: 50%;"></div>
</div>

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #f0f0f0;
  position: relative;
}

.progress {
  height: 100%;
  background-color: #00aaff;
  position: absolute;
  top: 0;
  left: 0;
}

.progress::after {
  content: attr(data-progress);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
}

.progress[data-progress="0"]::after {
  color: #ff0000;
}

.progress[data-progress="100"]::after {
  color: #00ff00;
}

var progressElement = document.querySelector('.progress');
var progressValue = 50; // 设置进度值，范围为0-100
progressElement.style.width = progressValue + '%';
progressElement.setAttribute('data-progress', progressValue);