带有文本的基础 CSS 进度条

基础 CSS 进度条通常用于表示任务或操作的完成进度。然而，为了更加直观地向用户展示进度信息，我们可以添加文本显示在进度条中。本文将介绍如何使用 CSS 创建带有文本的基础进度条。

HTML 结构

首先，我们需要创建一个基本的 HTML 结构来容纳进度条和文本。可以使用 <div> 元素作为进度条的容器，再嵌套一个 <div> 元素作为实际的进度条，最后添加一个 <span> 元素用于显示文本。

<div class="progress-bar">
  <div class="progress"></div>
  <span class="progress-text">0%</span>
</div>

CSS 样式

接下来，我们可以使用 CSS 样式来定义进度条和文本的外观。这里我们使用了简单的线性渐变背景色作为进度条的样式，以及一些基本的布局和颜色设定。

.progress-bar {
  width: 300px;
  height: 30px;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.progress {
  width: 0%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #71b4e8, #539ce8);
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #333;
  font-weight: bold;
}

JavaScript 动态更新进度和文本

最后，我们可以使用 JavaScript 来动态更新进度和文本。例如，我们可以使用一个计时器来模拟任务的完成进度。

const progressBar = document.querySelector('.progress');
const progressText = document.querySelector('.progress-text');

let progress = 0;
const timer = setInterval(() => {
  progress += 5;
  progressBar.style.width = `${progress}%`;
  progressText.innerText = `${progress}%`;

  if (progress >= 100) {
    clearInterval(timer);
    progressText.innerText = '任务完成！';
  }
}, 500);

以上代码将每 500 毫秒增加进度条的宽度和文本的内容，直到进度达到 100%。完成后，文本将显示为“任务完成！”。

结论

使用上述的 HTML、CSS 和 JavaScript 代码片段，我们可以创建一个带有文本的基础 CSS 进度条。通过动态更新进度和文本，我们可以向用户直观地展示任务的完成情况。在实际应用中，可以根据需要修改样式和 JavaScript 代码以满足具体需求。

请注意，以上代码片段是一个简单的示例，根据实际情况可能需要进行适当的修改和调整。