css 进度条分割 |css实现post

.progressbar {
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 10px;
overflow: hidden;
}
.progressbar div {
height: 100%;
background-color: #4CAF50;
border-radius: 10px;
width: 0;
transition: width 0.5s ease-in-out;
}
.progressbar .split1 {
width: 15%;
background-color: #ff6a00;
}
.progressbar .split2 {
width: 35%;
background-color: #f3ff00;
}
.progressbar .split3 {
width: 65%;
background-color: #00ffe9;
}
.progressbar .split4 {
width: 90%;
background-color: #00b4ff;
}

在上面的 CSS 代码中，大家定义了一个具有一组分割的进度条，每个分割都有不同的颜色。分割的宽度可以根据任务的不同进度调整。每个分割都有一个类，这使得可以动态添加一个类以更新进度条的宽度。

以下是使用 HTML 的例子：

<div class="progressbar">
<div class="split1"></div>
<div class="split2"></div>
<div class="split3"></div>
<div class="split4"></div>
</div>

在上面的 HTML 代码中，大家创建了一个具有四个分割的进度条。每个分割都由一个具有相应类名的 div 元素表示。

当任务完成时，可以动态更新进度条的宽度。例如，要更新第二个分割的宽度，可以使用以下代码：

document.querySelector('.split2').style.width = '50%';

这将使第二个分割的宽度变为整个进度条的一半。同样，可以使用 JavaScript 更新其他分割的宽度以反映当前进度。