javascript - 带循环分隔符的进度条

Question

<分区>

Answer 1

我试着重新创建你的进度条，看我的 fiddle here .

只要在你想要当前高亮的.cycle中添加一个类.current即可。为了更好的兼容性，我在上面使用了纯 CSS 和 float 。

您可以通过将 .counter 类添加到 .progress 元素来向圆圈添加数字。

.progress, .progress * { box-sizing: border-box; }
.progress {
    width: 410px;
    padding: 15px;
    padding-left: 25px;
    margin: 20px;
    border-radius: 3px;
    background: #ddd;
}
.progress .cycle {
    width: 90px;
    height: 10px;
    border: 1px solid #111;
    float: left;
    position: relative;
    background: #555;
}
.progress .cycle:first-of-type {
    width: 0px;
}
.progress .cycle.current ~ .cycle {
    background: #fff;
}
.progress .cycle:after {
    content: '';
    width: 30px;
    height: 30px;
    border: 1px solid #111;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    right: -15px;
    z-index: 2;
    background: #555;
}
.progress .cycle.current:after {
    background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
    background: #fff;
}
/* With Counters */
.progress.counter {
    counter-reset: cycle; 
}
.progress.counter .cycle:after {
    counter-increment: cycle;
    content: counter(cycle);
    line-height: 30px;
    text-align: center;
    font-family: Arial;
}

Using Floats
<div class="progress">
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle current"></div>
    <div class="cycle"></div>
    <div style="clear: both; height: 0px;">&nbsp;</div>
</div>
<div class="progress">
    <div class="cycle"></div>
    <div class="cycle current"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div style="clear: both; height: 0px;">&nbsp;</div>
</div>
<div class="progress counter">
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle current"></div>
    <div style="clear: both; height: 0px;">&nbsp;</div>
</div>

---

我还创建了另一个演示 here使用 CSS3 flex-box 方法。

.progress 元素的内容现在将根据元素的宽度进行调整。这让我们可以动态添加更多循环并调整进度条宽度，而无需担心固定宽度。此外，这可以防止循环以非常压缩的宽度包裹。

body { font-family: Arial; font-weight: normal;}
.progress, .progress * { box-sizing: border-box; }
.progress {
    padding: 25px;
    margin: 20px;
    border-radius: 3px;
    display: flex;
    flex-flow: row nowrap;
    background: #ddd;
}
.progress .cycle {
    height: 10px;
    border: 1px solid #111;
    flex: 1 0 auto;
    position: relative;
    background: #555;
}
.progress .cycle:first-of-type {
    width: 0px;
    flex: 0 0;
}
.progress .cycle.current ~ .cycle {
    background: #fff;
}
.progress .cycle:after {
    content: '';
    width: 30px;
    height: 30px;
    border: 1px solid #111;
    border-radius: 50%;
    position: absolute;
    top: -12px;
    right: -15px;
    z-index: 2;
    background: #555;
}
.progress .cycle.current:after {
    background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
    background: #fff;
}
/* With Counters */
.progress.counter {
    counter-reset: cycle; 
}
.progress.counter .cycle:after {
    counter-increment: cycle;
    content: counter(cycle);
    line-height: 30px;
    text-align: center;
    font-family: Arial;
}
/* Fixed Width */
.fixed1 {
    width: 400px;
}
.fixed2 {
    width: 300px;
}

<h2>Using Flex</h2>
6 cycles (fixed width)
<div class="progress fixed1">
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle current"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div style="clear: both; height: 0px;">&nbsp;</div>
</div>
9 cycles (100% width)
<div class="progress">
    <div class="cycle"></div>
    <div class="cycle current"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
</div>
5 cycles (fixed width, numbered)
<div class="progress counter fixed2">
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle current"></div>
</div>
7 cycles (100%, numbered)
<div class="progress counter">
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
    <div class="cycle current"></div>
    <div class="cycle"></div>
    <div class="cycle"></div>
</div>

CSS3 flexbox 方法的唯一问题是浏览器 support .如果浏览器支持对你来说没问题，那就选择 flex-box 方法 :)