如何使用css制作垂直进度路径答案

【问题标题】：how to make vertical progress path using css如何使用css制作垂直进度路径
【发布时间】：2014-11-29 06:27:03
【问题描述】：

我想知道如何使用 HTML、CSS 和 Js 制作进度条或更类似于进度路径

我发现这个here 这绝对没问题，但我希望它在图像中垂直显示这样的东西

随着用户完成分配的任务而逐渐填充。或者如果有任何可用的图书馆，请告诉我。我搜索了很多，但没有找到任何满足我需要的东西。

【问题讨论】：

标签： javascript css progress-bar

【解决方案1】：

@NGLN 的答案比我的简单，但我为它做了一个小技巧，并添加了点亮节点的功能！

Check it out

var list = document.getElementById('progress'),
    next = document.getElementById('next'),
    clear = document.getElementById('clear'),
    children = list.children,
    completed = 0;

// simulate activating a node
next.addEventListener('click', function() {
    
    // count the number of completed nodes.
    completed = (completed === 0) ? 1 : completed + 2;
    if (completed > children.length) return;
    
    // for each node that is completed, reflect the status
    // and show a green color!
    for (var i = 0; i < completed; i++) {
        children[i].children[0].classList.remove('grey');
        children[i].children[0].classList.add('green');
        
        // if this child is a node and not divider, 
        // make it shine a little more
        if (i % 2 === 0) {
            children[i].children[0].classList.add('activated');            
        }
    }
    
}, false);

// clear the activated state of the markers
clear.addEventListener('click', function() {
    for (var i = 0; i < children.length; i++) {
        children[i].children[0].classList.remove('green');
        children[i].children[0].classList.remove('activated');
        children[i].children[0].classList.add('grey');
    }
    completed = 0;
}, false);

*, *:after, *:before { margin:0; padding:0; }
body { 
    padding: 15px; 
    font-family: Helvetica, sans-serif;
}

input[type="button"] {
    margin-top: 20px;
}
.node {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display:inline-block;
    transition: all 1000ms ease;
}

.activated {
    box-shadow: 0px 0px 3px 2px rgba(194, 255, 194, 0.8);
}

.divider {
    height: 40px;
    width: 2px;
    margin-left: 4px;
    transition: all 800ms ease;
}

li p {
    display:inline-block;
    margin-left: 25px;
}

li {
    list-style: none;
    line-height: 1px;
}

.green{ background-color: rgba(92, 184, 92, 1); }
.grey { background-color: rgba(201, 201, 201, 1); }

<ul id="progress">
    <li><div class="node grey"></div><p>The First Thing!</p></li>
    <li><div class="divider grey"></div></li>
    <li><div class="node grey"></div><p>The Second Thing!</p></li>
    <li><div class="divider grey"></div></li>
    <li><div class="node grey"></div><p>The Third Thing!</p></li>
    <li><div class="divider grey"></div></li>
    <li><div class="node grey"></div><p>The Fourth Thing!</p></li>
    <li><div class="divider grey"></div></li>
    <li><div class="node grey"></div><p>The Last Thing!</p></li>
</ul>
<input type="button" value="Next" id="next"/>
<input type="button" value="Clear" id="clear"/>

【讨论】：

【解决方案2】：

这样的？

.progress {
  list-style: none;
  font-size: 12pt;
}
.progress li {
  border-left: 0.2em solid black;
  padding: 0 0 0.1em 1em;
  position: relative;
}
.progress li::before {
  content: "•";
  font-size: 2.5em;
  position: absolute;
  left: -0.21em;
  top: -0.45em;
}

<ol class="progress">
    <li>Earth</li>
    <li>Land masses</li>
    <li>Mountains</li>
    <li>Guangxi</li>
    <li>Airport runway</li>
</ol>

【讨论】：