自定义形状进度条

Question

我正在努力为网站实现自定义进度条。它应该具有以下形状：

当用户选择一个圆圈时，我希望该线（仅限线，不包括圆圈）填充不同的颜色，直到达到该圆圈，最后那个红点应出现在中间，如果用户单击第三个圆圈，则应得到以下结果：

我不知道什么是最好、最简单的方法来完成这个任务。我尝试过一些纯CSS、jQuery和JavaScript的方案，但都无法重新创建这个效果。我应该有两张图片并逐步重叠它们，直到只到达被点击的点吗？我应该完全忘记图片，尝试用CSS或SVG重新创建形状，并改变某个部分的颜色吗？

我知道通常问题需要代码，但我不能展示任何代码，因为我不知道如何入手，数小时的在线研究导致了无数不适用于我的情况的解决方案。

提前感谢您的帮助！

- David Matos

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>    

- Paul LeBeau

---

那太棒了，那正是我想要的，非常感谢！我会把你的名字加在 CSS 和 jQuery 上面做注释。 - David Matos

Answer 2

我会在黑线正上方创建一条红线。然后使用jQuery的animate函数增加其宽度，直到达到所需的圆形大小。完成后，类似地制作红色圆形（如果您希望它扩展，则进行类似的操作，否则只需将其放入即可）。

- Pierre Tasci

Answer 3

简单的方法是制作黑线和点的svg或png背景，然后使用background repeat-x将其作为背景。接着，将红色部分也做成图片，并用一个新的HTML元素放在背景上方，并同样使用background repeat-x。最后，您可以使用css/js更改红色元素的宽度来填充进度条。

- seahorsepip