css实现长条形进度条且上方显示数据

你可以使用CSS来实现长条形进度条并在上方显示数据。以下是一个简单的示例：

HTML代码：

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

CSS代码：

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #eee;
  border-radius: 10px;
  position: relative;
}

.progress {
  height: 100%;
  background-color: #ff0000;
  border-radius: 10px;
}

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

在上面的代码中，`.progress-bar` 是进度条的容器，设置了宽度、高度和背景颜色。`.progress` 是进度条本身，通过设置 `width` 属性来控制进度的百分比。`.progress-text` 是用于显示进度数据的文本，通过设置 `position` 属性和 `transform` 属性来使其居中显示。

你可以根据需要调整进度条容器的宽度、高度和颜色，以及进度条本身的宽度和颜色来满足你的需求。