在 HTML 和 CSS 中，可以通过简单的结构和样式来实现各种类型的进度条。进度条通常用于显示任务的完成进度。以下是几种常见的进度条实现方式，包括水平进度条、垂直进度条以及带文本的进度条等。

1. 水平进度条

这是最常见的一种进度条，它通过改变 width 来显示任务的进度。

HTML:

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

CSS:

.progress-bar {
    width: 100%; /* 容器宽度 */
    height: 30px; /* 进度条高度 */
    background-color: #f3f3f3; /* 背景色 */
    border-radius: 5px; /* 圆角 */
}

.progress {
    height: 100%; /* 高度占满容器 */
    width: 50%; /* 当前进度 (50% 可以根据实际进度动态修改) */
    background-color: #4caf50; /* 进度条的颜色 */
    border-radius: 5px; /* 圆角 */
}

解释:

  • .progress-bar 是进度条的容器，它定义了进度条的总宽度和背景颜色。
  • .progress 是进度条本身，通过设置其 width 属性来控制进度，百分比可以根据实际进度动态调整。

2. 带文本的水平进度条

这种进度条在进度条内显示当前的百分比值。

HTML:

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

CSS:

.progress-bar {
    width: 100%;
    height: 30px;
    background-color: #f3f3f3;
    border-radius: 5px;
    position: relative;
}

.progress {
    height: 100%;
    width: 50%; /* 根据实际进度动态修改 */
    background-color: #4caf50;
    border-radius: 5px;
    position: relative;
}

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

解释:

  • .progress-text 使用 position: absolute 和 transform 使其水平和垂直居中于进度条内，显示百分比文本。

3. 垂直进度条

垂直进度条与水平进度条类似，只需要改变容器和进度条的方向即可。

HTML:

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

CSS:

.progress-bar-vertical {
    width: 30px; /* 宽度 */
    height: 200px; /* 高度 */
    background-color: #f3f3f3;
    border-radius: 5px;
}

.progress-vertical {
    width: 100%;
    height: 50%; /* 根据实际进度动态修改 */
    background-color: #4caf50;
    border-radius: 5px;
}

解释:

  • .progress-bar-vertical 容器设置了固定的高度，.progress-vertical 控制进度条的高度，进度条会随高度变化而变化。

4. 圆形进度条

圆形进度条通过使用 border-radius 和 conic-gradient（支持部分现代浏览器）来实现。

HTML:

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

CSS:

.circle-progress {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(#4caf50 0% 50%, #f3f3f3 50% 100%);
    position: relative;
}

.circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #f3f3f3;
}

解释:

  • conic-gradient 可以创建一个圆形的渐变背景，模拟圆形进度条效果。这里的进度为 50%，可以根据实际进度动态修改百分比。

5. 带动画效果的进度条

为了增强用户体验，可以给进度条添加动画效果。

HTML:

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

CSS:

.progress-bar-animated {
    width: 100%;
    height: 30px;
    background-color: #f3f3f3;
    border-radius: 5px;
}

.progress-animated {
    height: 100%;
    width: 0%; /* 初始宽度为0 */
    background-color: #4caf50;
    border-radius: 5px;
    animation: progressAnimation 2s forwards;
}

@keyframes progressAnimation {
    0% {
        width: 0%;
    }
    100% {
        width: 80%; /* 动态改变进度（这里为80%） */
    }
}

解释:

  • @keyframes 用于定义动画，progressAnimation 动画从 0% 到 80% 的进度。
  • animation 属性用于应用动画效果，并在进度条加载时逐步显示进度。

总结

通过 CSS，你可以非常方便地创建不同类型的进度条。只需通过调整容器和进度条的宽度、颜色和动画效果，便能实现各种自定义的进度显示效果。如果需要动态改变进度值，你可以通过 JavaScript 来动态调整进度条的 width 属性。