自定义形状进度条[关闭]答案

【问题标题】：Custom shape progress bar [closed]自定义形状进度条[关闭]
【发布时间】：2014-11-20 23:07:19
【问题描述】：

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

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

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

我知道这里的问题通常都有代码，但我无法显示任何代码，因为我不知道要采取什么方法，并且在线研究数小时导致无数解决方案不适用于我的案例。

提前致谢。

【问题讨论】：

标签： javascript css svg progress-bar

【解决方案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>

【讨论】：

这太不可思议了，这正是我的意思，非常感谢！我会把你的名字放在 CSS 和 jQuery 上面注释。

【解决方案2】：

我会在黑线的正上方创建一条红线。然后使用 jquery 的 animate 来增加宽度，直到达到所需的圆圈。然后一旦完成，做类似的事情来制作红色圆圈（如果你想让它扩大，否则就把它放在那里）

【讨论】：

【解决方案3】：

简单的方法是在svg或png中制作黑线和点的bg，然后将其用作背景repeat-x，然后将红色部分也作为图像并将其与新的html元素一起放在bg的顶部，然后也使用背景重复-x。然后你可以用 css/js 改变红色元素的宽度来填充进度条。

【讨论】：