在网页交互设计中，进度条是展示任务完成度的常用组件，带有渐变背景和透明分隔线的进度条视觉效果更突出，能提升页面的整体质感。下面我们一步步实现这个效果。
基础HTML结构
进度条的核心结构分为外层容器和内层进度填充两部分，外层控制整体尺寸和背景，内层展示实际进度。代码如下：
<div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div>
核心CSS样式实现
外层容器样式
外层容器需要设置固定宽高、圆角，同时给内层进度条预留溢出隐藏的空间，避免进度超出容器范围。
.progress-container {
width: 400px;
height: 24px;
border-radius: 12px;
background-color: #f0f0f0;
overflow: hidden;
position: relative;
}
渐变背景与透明分隔线实现
内层进度条使用线性渐变作为背景，同时通过伪元素或者背景叠加的方式实现透明分隔线。这里我们使用背景叠加方案，先定义渐变背景，再通过重复线性渐变添加垂直透明分隔线。
.progress-bar {
height: 100%;
width: 0%; /* 初始进度为0 */
border-radius: 12px;
/* 基础渐变背景，从蓝色过渡到紫色 */
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
/* 叠加透明分隔线，每30px出现一个2px宽的透明线条 */
background-image:
linear-gradient(90deg, #4facfe 0%, #00f2fe 100%),
repeating-linear-gradient(
90deg,
transparent,
transparent 28px,
rgba(255, 255, 255, 0.5) 28px,
rgba(255, 255, 255, 0.5) 30px
);
background-blend-mode: overlay;
transition: width 0.3s ease; /* 进度变化时的过渡动画 */
}
分隔线效果优化
如果觉得分隔线透明度不够，可以调整rgba的透明度数值，或者使用background-size调整分隔线的间距。比如想要分隔线更密集，可以缩小重复渐变的周期：
/* 调整为每20px一个分隔线 */
background-image:
linear-gradient(90deg, #4facfe 0%, #00f2fe 100%),
repeating-linear-gradient(
90deg,
transparent,
transparent 18px,
rgba(255, 255, 255, 0.6) 18px,
rgba(255, 255, 255, 0.6) 20px
);
动态更新进度
我们可以通过JavaScript动态修改进度条的宽度，来模拟进度变化的效果。示例代码如下：
// 获取进度条元素
const progressBar = document.getElementById('progressBar');
let currentProgress = 0;
// 模拟进度更新，每500ms增加10%
const timer = setInterval(() => {
currentProgress += 10;
if (currentProgress > 100) {
currentProgress = 100;
clearInterval(timer);
}
progressBar.style.width = currentProgress + '%';
}, 500);
常见问题说明
- 渐变背景颜色可以根据需求调整
linear-gradient的参数，支持多色渐变 - 分隔线的颜色和透明度可以通过调整
repeating-linear-gradient中的颜色值修改 - 如果进度条需要适配暗黑模式，可以配合CSS变量动态切换渐变和分隔线的颜色
完整示例代码
以下是可直接运行的完整代码，复制后保存为HTML文件即可查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变背景透明分隔线进度条</title>
<style>
.progress-container {
width: 400px;
height: 24px;
border-radius: 12px;
background-color: #f0f0f0;
overflow: hidden;
position: relative;
margin: 50px auto;
}
.progress-bar {
height: 100%;
width: 0%;
border-radius: 12px;
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
background-image:
linear-gradient(90deg, #4facfe 0%, #00f2fe 100%),
repeating-linear-gradient(
90deg,
transparent,
transparent 28px,
rgba(255, 255, 255, 0.5) 28px,
rgba(255, 255, 255, 0.5) 30px
);
background-blend-mode: overlay;
transition: width 0.3s ease;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
<script>
const progressBar = document.getElementById('progressBar');
let currentProgress = 0;
const timer = setInterval(() => {
currentProgress += 10;
if (currentProgress > 100) {
currentProgress = 100;
clearInterval(timer);
}
progressBar.style.width = currentProgress + '%';
}, 500);
</script>
</body>
</html>