带循环分频器的进度条

Question

我正在尝试创建一个进度条，我想要一个循环分隔符，以便我可以分割我所拥有的情况

有人可以给我一个解决方案吗？

Answer 1

我尝试重新创建进度条，看到我的小提琴here。

只需将一个班级.current添加到您当前要突出显示的.cycle即可。为了更好的兼容性，我在浮点数上使用了纯CSS。

您可以通过将.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>

我还使用 CSS3 here 方法创建了另一个演示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方法：）