基础 CSS 进度条

介绍

进度条是指在某些场景下用来展示具体的进度情况的一种视觉元素。在开发中，我们经常会用到进度条，例如在文件上传、数据加载等场景下，需要告诉用户当前进度。本文将主要介绍如何使用基础 CSS 创建一个简单的进度条。

基本结构

我们可以使用 div 标签来创建进度条，需要添加以下两个元素：

1. .progress：设置进度条容器的样式。
2. .progress-bar：设置进度条本身的样式，需要嵌套在 .progress 内。

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

样式设置

我们可以使用 CSS 的 width 属性来设置进度条的宽度，也可以用 background-color 属性来设置进度条的颜色。

在下面的例子中，我们将设置进度条为 50% 宽度，绿色背景色。

.progress {
  width: 500px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.progress-bar {
  width: 50%;
  height: 100%;
  background-color: green;
}

完整代码

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

<style>
.progress {
  width: 500px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
}

.progress-bar {
  width: 50%;
  height: 100%;
  background-color: green;
}
</style>

结束语

基础 CSS 进度条的创建相对简单，但是我们可以通过使用不同的 CSS 属性和样式，让进度条变得更加美观，更符合自己的需求。另外，如果需要更复杂的进度条，可能需要使用 JavaScript 或者其他库来实现。