Html，css，js -进度条，文本在中间，关闭按钮在右边

<div class="progress-bar">
  <div class="progress"></div>
</div>

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

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

var progress = 0;
var progressBar = document.querySelector('.progress');

function updateProgress() {
  if (progress < 100) {
    progress += 1;
    progressBar.style.width = progress + '%';
  } else {
    clearInterval(timer);
  }
}

var timer = setInterval(updateProgress, 50);

<div class="progress-bar">
  <div class="progress"></div>
  <div class="text">Loading...</div>
  <button class="close-button">Close</button>
</div>

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}