自定义进度条修改挑战

Question

我正在尝试制作进度条，如下图所示。

我无法做的是：

• 在数字之间画一条连线
• 有效号码将有一个更大的圈子
• 已完成的步骤将显示绿线并且未显示灰线。

Custom progress bar

CSS

.custom-progress-bar ul li span {
    width: 27px;
    height: 27px;
    background: #cbcbcb;
    color:#fff;
    float: right;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    margin-left: 14px;
    font-size: 18px;
    line-height: 28px;

}
.custom-progress-bar ul {

    list-style:none;
}

.custom-progress-bar .last{
width: 80px;
border-radius: 20px;
}

.custom-progress-bar .completed{
    background: #9cc656;
    color:#fff;
}

HTML

<div class="custom-progress-bar">
                    <ul>
                    <li><span class="bubble"><a href="#">1</a></span></li>
                    <li><span class="bubble"><a href="#">2</a></span></li>
                    <li><span class="bubble"><a href="#">3</a></span></li>
                    <li><span class="bubble completed"><a href="#">4</a></span></li>
                    <li><span class="bubble"><a href="#">5</a></span></li>
                    <li><span class="bubble last"><a href="#">finish</a></span></li>
                    </ul>
                    </div>

Answer 1

您可以从以下代码开始：

a {
  color: #fff;
}
.custom-progress-bar ul li span {
    width: 27px;
    height: 27px;
    background: #cbcbcb;
    color:#fff;
    display: block;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    
    font-size: 18px;
    line-height: 28px;
}
.custom-progress-bar ul {
    list-style:none;
}

.custom-progress-bar .last {
width: 80px;
border-radius: 20px;
}

.custom-progress-bar ul li {
  display: inline-block;
  margin-left: 14px;
  border-radius: 50%;
  width: 27px;
    height: 27px;
}

.custom-progress-bar ul li::after {
  display: block;
  content: '';
  height: 2px;
  width: 20px;
  margin-top: -14px;
  margin-left: -20px;
  background: #cbcbcb;
}

.custom-progress-bar ul li:first-child::after {
  display: none;
}

.custom-progress-bar li.completed {
  margin-right: 2px;
  border: 4px solid #fff;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(156,198,86,1);
  -moz-box-shadow: 0px 0px 0px 2px rgba(156,198,86,1);
  box-shadow: 0px 0px 0px 2px rgba(156,198,86,1);
}

.custom-progress-bar li.completed::after {
     margin-left: -24px;
}

.custom-progress-bar li.completed + li span {
    background: #9cc656;
}

.custom-progress-bar li.completed + li + li span {
    background: #9cc656;
}

.custom-progress-bar li.completed + li::after {
    background: #9cc656;
}

.custom-progress-bar li.completed + li + li::after {
    background: #9cc656;
}

<div class="custom-progress-bar">
    <ul>
        <li><span class="bubble"><a href="#">1</a></span></li>
        <li><span class="bubble"><a href="#">2</a></span></li>
        <li><span class="bubble"><a href="#">3</a></span></li>
        <li class="completed"><span class="bubble"><a href="#">4</a></span></li>
        <li><span class="bubble"><a href="#">5</a></span></li>
        <li><span class="bubble last"><a href="#">finish</a></span></li>
    </ul>
</div>