步骤指标CSS

Question

我试图模仿这个步骤指标，但我刚刚开始学习SASS，而且一般都不是CSS的专业人士。

我正在努力实现这个目标：

但到目前为止：

CodePen：https://codepen.io/tarnn/pen/XEPdMP `

.progressbar li.completed:before {
        content: '';
        background: url("/assets/icons/check.svg") 0 3px no-repeat;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ebeae8;
    }`

非常接近，但我意识到有一些我不知道如何解决的问题，并希望推动正确的方向。

原作是什么，我正在努力：

1. 每步增加字体大小，1-2-3-4等。
2. 两步之间的线路两端的边距/空间都很小
3. 它下方的字体不完美，也不正确居中。

**我的文字是正确的，原来的**错了

每个步骤都添加一个类：

活动：带蓝色圆圈和数字的当前是活动类。 完成：添加灰色复选框，我正在使用SVG。 不活跃：正常白色BG带文字。

Answer 1

以下是一些可能有所帮助的更改，下面是更新的CodePen（在SCSS中有其他注释）：

• 将SASS变量用于圆圈大小和边框，以及线条和圆圈之间的间隙：

  $circleSize: 50px; $circleBorderWidth: 5px; $lineOffset: 10px;

  这样可以更轻松地计算线宽，位置和线高。例如：

  .progressbar li:after { width: calc(100% - #{($circleSize + $circleBorderWidth * 2 + $lineOffset * 2)}); }

• 为非活动项目添加白色边框，使其与active项目的大小相匹配 - 这样，线条和圆圈之间的间隙可以统一。

https://codepen.io/anon/pen/RMYRPp

修改：更新了CodePen以修复圆圈尺寸