JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress">
    <div class="circle done">
<span class="label">1</span>

<span class="title">Titulo 1</span>

    </div>
<span class="bar done"></span>

    <div class="circle done">
<span class="label">2</span>

<span class="title">Titulo 2</span>

    </div>
<span class="bar half"></span>

    <div class="circle active">
<span class="label">3</span>

<span class="title">Titulo 3</span>

    </div>
<span class="bar"></span>

    <div class="circle">
<span class="label">4</span>

<span class="title">Titulo 5</span>

    </div>
<span class="bar"></span>

    <div class="circle">
<span class="label">5</span>

<span class="title">Titulo 6</span>

    </div>
</div>

CSS

.progress {
    width: 1000px;
    margin: 20px auto;
    text-align: center;
}
.progress .circle, .progress .bar {
    display: inline-block;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid #d5d5da;
}
.progress .bar {
    position: relative;
    width: 80px;
    height: 6px;
    top: -33px;
    margin-left: -5px;
    margin-right: -5px;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.progress .circle .label {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    margin-top: 3px;
    color: #b5b5ba;
    font-size: 17px;
}
.progress .circle .title {
    color: #b5b5ba;
    font-size: 13px;
    line-height: 30px;
    margin-left: -5px;
}
/* Done / Active */
 .progress .bar.done, .progress .circle.done {
    background: #eee;
}
.progress .bar.active {
    background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
    color: #FFF;
    background: #81CE97;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.done .title {
    color: #444;
}
.progress .circle.active .label {
    color: #FFF;
    background: #0c95be;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.active .title {
    color: #0c95be;
}

JavaScript

$(document).ready(function () {
    var $b_ = $('body'),
        t_ = $b_[0].clientWidth,
        c_ = $(".circle").length + 1,
        s_ = parseInt(t_ / c_, 10),
        m_ = [];
    for (var j = 0; j < c_; m_.push(s_ * ++j));
    var setbarra = function (j) {
        $('.progress .circle').removeClass().addClass('circle');
        $('.progress .bar').removeClass().addClass('bar');
        for (i = 1; i < $(".circle").length; i++) {
            $('.progress .circle:nth-of-type(' + i + ') .label').html(i);
        }
        for (i = 1; i <= j; i++) {
            $('.progress .circle:nth-of-type(' + i + ')').addClass('active');
            $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');
            $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('&#10003;');
            $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');

            $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');
        }
    }
    var listnerScrool = function (e) {
        var l = $b_.scrollLeft();
        for (var j = 1; j < m_.length; j++) {
            if (l > m_[j - 1] && l < m_[j]) setbarra(j);
        }
    }
    $(window).on("scroll", listnerScrool);
    setbarra(1);
});