CSS进度条与计数器实现教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS实现步骤进度条，counter计数器教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

使用CSS计数器创建步骤进度条需三步：1. 在父元素用counter-reset初始化计数器；2. 在每个步骤元素上用counter-increment递增计数；3. 通过::before伪元素的content: counter()显示序号，并结合Flexbox布局、伪元素连接线及类名控制完成/活跃状态样式，最后通过CSS变量和响应式设计优化可维护性与兼容性，该方法语义清晰、无需JavaScript、性能高效且易于维护。

CSS如何创建步骤进度条？counter计数器

在CSS中创建步骤进度条，尤其是那些带有数字标记的，counter计数器是一个非常优雅且高效的解决方案。它允许我们纯粹通过CSS来管理和显示序列号，而无需在HTML中手动添加数字或依赖JavaScript来动态生成。这不仅保持了HTML的语义化，也让样式和内容的耦合度更低，维护起来更加轻松。

解决方案

要使用CSS计数器创建一个基本的步骤进度条，核心思想是利用counter-reset在父元素上初始化一个计数器，然后通过counter-increment在每个步骤元素上递增它，最后用content: counter()在伪元素中显示计数。

HTML 结构:

一个简单的无序列表或有序列表就能很好地承载步骤：

<ul class="progress-steps">
    <li class="step completed">步骤一：开始</li>
    <li class="step active">步骤二：进行中</li>
    <li class="step">步骤三：待处理</li>
    <li class="step">步骤四：完成</li>
</ul>

CSS 样式:

.progress-steps {
    display: flex; /* 使用Flexbox布局步骤 */
    justify-content: space-between;
    list-style: none; /* 移除默认列表样式 */
    padding: 0;
    margin: 20px 0;
    position: relative; /* 为连接线定位提供上下文 */
    counter-reset: step-counter; /* 初始化一个名为 'step-counter' 的计数器 */
}

.step {
    flex: 1; /* 每个步骤占据等宽空间 */
    text-align: center;
    position: relative;
    padding-top: 40px; /* 为数字留出空间 */
    color: #555;
    font-size: 14px;
    counter-increment: step-counter; /* 递增计数器 */
}

/* 步骤数字的样式 */
.step::before {
    content: counter(step-counter); /* 显示计数器值 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #ccc;
    color: white;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    z-index: 1; /* 确保数字在连接线上方 */
}

/* 步骤连接线的样式 */
.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px; /* 与数字中心对齐 */
    left: 50%;
    width: 100%; /* 线条宽度 */
    height: 2px;
    background-color: #ccc;
    z-index: 0; /* 确保线条在数字下方 */
    transform: translateX(0); /* 默认从当前步骤中心开始 */
}

/* 活跃/完成状态的样式 */
.step.completed::before {
    background-color: #28a745; /* 完成的步骤显示绿色 */
}

.step.active::before {
    background-color: #007bff; /* 活跃的步骤显示蓝色 */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* 增加视觉强调 */
}

/* 已经完成的步骤，其后的连接线也应该变色 */
.step.completed + .step::after,
.step.active::after {
    background-color: #28a745; /* 假设活跃和完成的线都变色 */
}

/* 修正最后一个步骤的线条，它不应该有after伪元素 */
.progress-steps .step:last-child::after {
    display: none;
}

/* 针对已经完成的步骤，其前面的线条应该也是完成状态的颜色 */
/* 这是一个常见的挑战，通常需要更复杂的选择器或JS辅助。
   这里我们尝试通过相邻兄弟选择器来模拟部分效果，
   但要实现从起点到当前活跃点的完整进度线，纯CSS有时会受限。
   更可靠的做法是让父元素背景渐变或使用JS动态调整线的宽度/颜色。
*/
.step.completed + .step::before {
    /* 确保完成的下一步的数字背景色也正确 */
    /* 实际上这里不需要改变，因为每个步骤的::before是独立的 */
}

为什么选择CSS计数器而不是其他方法？它的优势体现在哪里？

说实话，我看到过太多开发者为了实现一个简单的步骤进度条，要么在每个列表项里手动写上“1”、“2”、“3”，要么就急匆匆地引入JavaScript，动态去生成这些数字。但讲真，对于这种本身就带有序列属性的UI组件，CSS计数器简直是天作之合，它提供了一种非常“纯粹”的解决方案。

它的优势体现在几个方面：

1. 语义化与简洁性： 这是我最看重的一点。你的HTML可以保持非常干净，比如
2. 我的步骤内容
。你不需要为了显示数字而添加额外的 或
，也不需要 data-step="1" 这样的自定义属性来标记顺序。数字完全由CSS在视觉层面上生成，这极大地提升了代码的可读性和维护性。
自动化与动态性： 想象一下，如果你的步骤是动态加载的，或者用户在某个阶段可以添加/删除步骤。使用CSS计数器，你只需要增删HTML中的
元素，数字就会自动更新，无需任何JavaScript介入。这简直是懒人福音，也大大降低了出错的概率。
性能优势： 纯CSS的实现意味着没有JavaScript的解析和执行开销。对于大型应用或性能敏感的页面来说，这一点虽然微小，但积少成多，能减少浏览器的工作负担。
样式灵活性： 你可以非常灵活地控制计数器的样式，比如字体、颜色、背景、边框，甚至可以利用它实现一些非常规的图形效果。因为它是通过伪元素实现的，所以可以独立于步骤内容进行定位和造型。

总的来说，CSS计数器提供了一种声明式、自动化、高性能且高度可定制的方式来处理有序列表的编号，对于步骤进度条这种场景，它无疑是首选。

如何为进度条添加视觉上的“完成”状态和连接线？

一个进度条，它的核心价值在于“进度”二字。仅仅有数字是远远不够的，我们还需要视觉上的反馈来告诉用户：哪些步骤已经完成？当前进行到哪一步了？以及步骤之间是如何连接的？这涉及到对步骤本身和连接线的状态管理。

1. 状态管理：

通常，我们会通过给