JSFiddle - React, Tailwind, and code Playground

by Nir Azuelos

HTML

<div style="width: 50%;">
    <ol class="bullet-progress-bar" data-steps="4">
    <li class="done"></li>
    <li class="done"></li>
    <li class="in-progress"></li>
    <li class=""></li>
    </ol>
</div>

CSS

ol.bullet-progress-bar {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
    border-bottom: 2px dotted yellowgreen;
}

ol.bullet-progress-bar li {
    box-sizing: border-box;
    bottom: 0.5em;
    float: left;
    height: 1.2em;
    width: 1.2em;
    border-radius: 1.2em;
    line-height: 1.2em;
    padding: 2px 4px 4px 3px;
    background-color: #ddd;
    position: relative;
}

ol.bullet-progress-bar[data-steps="2"] li { margin-right: 99%; }
ol.bullet-progress-bar[data-steps="3"] li { margin-right: 49%; }
ol.bullet-progress-bar[data-steps="4"] li { margin-right: 30%; }
ol.bullet-progress-bar[data-steps="5"] li { margin-right: 24%; }
ol.bullet-progress-bar[data-steps="6"] li { margin-right: 19%; }
ol.bullet-progress-bar[data-steps="7"] li { margin-right: 16%; }
ol.bullet-progress-bar[data-steps="8"] li { margin-right: 14%; }
ol.bullet-progress-bar[data-steps="9"] li { margin-right: 12%; }


ol.bullet-progress-bar li:last-child {
    border-bottom-color: transparent;
    margin-right: 0;
    position: absolute;
    right: 0;
    bottom: -0.7em;
}

ol.bullet-progress-bar li.done {
    color: black;
}

ol.bullet-progress-bar li.in-progress {
    color: silver;
}

ol.bullet-progress-bar li.done {
    color: white;
    background-color: #9ACD32;
}

ol.bullet-progress-bar li.done:after {
        content: "\2713";
}

ol.bullet-progress-bar li.in-progress {
    background-color: #eee;
    border: 2px solid #9ACD32;
}

JavaScript

$("li").on("click", function() {
    debugger;
});