css进度条

CSS进度条可以通过CSS样式来创建，它们可以用于显示某个任务的进度，例如文件上传或下载。下面是一个简单的CSS进度条示例：

HTML代码：

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

CSS代码：

.progress-bar {
  background-color: #ddd;
  border-radius: 5px;
  height: 10px;
  margin: 20px 0;
  overflow: hidden;
  width: 300px;
}
.progress {
  background-color: #4CAF50;
  height: 100%;
  width: 0;
  transition: width 0.5s ease-in-out;
}

在上面的示例中，我们使用了两个div元素来创建进度条。外部div用于显示进度条的背景颜色和边框半径等样式，内部div用于显示进度的颜色和动态宽度。我们使用了CSS过渡效果来实现进度条的动态效果。

为了更新进度条的进度，我们可以使用JavaScript或jQuery来设置内部div的宽度。例如，以下代码将进度条的宽度设置为50%：

$('.progress').css('width', '50%');