自定义形状进度条

Question

我正在努力为网站实现自定义进度条.这是它应该具有的形状:

当用户选择一个圆圈时,我希望线条(只有线条,而不是圆圈)用不同的颜色填充,直到它到达那个圆圈,最后红色点应该出现在中间,这是最终的结果如果用户点击了第三个圆圈:

我不知道什么是最好,更简单的方法.我已经在线尝试了一些纯CSS,jQuery和JavaScript解决方案,但没有人可以重新创建这种效果.我应该有两个图像并逐步覆盖它们,直到我只到达点击的点吗？我是否应该完全忘记图像并尝试使用CSS或SVG重新创建形状并更改某个部分的颜色？

我知道这里的问题通常都有代码,但我无法表现出来,因为我不知道采取什么方法,在线研究时间导致无数的解决方案不适用于我的情况.

提前致谢.

Answer 1

混合使用CSS和一点点jQuery非常简单.

// Add click handler to the original dots
$("UL.progress LI").click(function(e) {
   // Deselect current selection
   $("UL.progress LI.selected").removeClass("selected");
   var  newDot = $(this);
   // Which dot are we selecting?
   var  newProgressWidth = newDot.index();
   // Animate the new width of the red line
   $("UL.progress LI.progressline").animate(
       {'width': (newProgressWidth * 90) + 'px'},
       400,
       function() {
          // When done, select the new dot
          newDot.addClass("selected");
       });

});

// Add the black and red bars as additional <li> elements
// without click handlers
$("<li>").addClass("blackbar").appendTo("UL.progress");
$("<li>").addClass("progressline").appendTo("UL.progress");

// Select the first dot
$("UL.progress LI").first().addClass("selected");

UL.progress {
    list-style: none;
    padding: 0;
    position: relative;
}

/* the black dots */
UL.progress LI {
    float: left;
    width: 60px;
    height: 60px;
    background-color: black;
    border-radius: 50%;
    margin-left: 30px;
    position: relative;
    cursor: pointer;
}

/* first black dot has no gap to the left */
UL.progress LI:first-child {
    margin-left: 0;
}

/* red dot when selected */
UL.progress LI.selected:after {
    content: '';
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 50%;
}


/* the black and red lines at the back*/
UL.progress LI.blackbar,
UL.progress LI.progressline {
    z-index: -2;
    content: '';
    display: block;
    position: absolute;
    top: 28px;
    left: 30px;    /* 60 (diameter) / 2 */
    width: 450px;  /* 5*60 + 5*30 (dot diameter and gap) */
    height: 4px;
    background-color: black;
    margin-left: 0;
    border-radius: 0;
}

/* the black line */
UL.progress LI.blackbar {
    z-index: -2;
    background-color: black;
}

/* the red progress line */
UL.progress LI.progressline {
    z-index: -1;
    background-color: red;
    width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Example progress bar<br/>

<ul class="progress">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>