JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="progress-bar">
    <li>
    <li>
    <li>
    <li class="stop">
    <li>
</ul>

SCSS

ul.progress-bar {
    height: 300px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
    &::after {
        content: "";
        position: absolute;
        top:0;
        left:5px;
        background: #777;
        width: 100vh;
        height: 5px;
    }
    li {
        background: #000;
        border-radius: 100px;
        width: 15px;
        height: 15px;
        z-index: 1;
        position: relative;
        &.stop ~ li {
            background: #777;
            &::after {
                height: 0;
            }
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 5px;
            background: #000;
            width: 5px;
            height: 100vh;
        }
    }
}

JavaScript

//This script just picks a random node to stop on and applies the class
//Not necessary for the bar to work normally
var bar = document.querySelector("ul.progress-bar");
var lis = bar.querySelectorAll("li");

setInterval(function() {
    Array.prototype.forEach.call(lis, function(li) {
        li.className = "";
    });
    var rand = (Math.random() * 5) | 0;
    lis[rand].className = "stop";
}, 500);