JSFiddle - React, Tailwind, and code Playground

HTML

<div style="max-width: 160px">
    <div class="progressBar small">
        <div class="seg fill"></div>
        <div class="seg fill"></div>
        <div class="seg"></div>
        <div class="seg"></div>
        <div class="seg"></div>
        <div class="progradient"></div>
    </div>
</div>

<div class="progressBar large">
    <div class="seg fill"></div>
    <div class="seg fill"></div>
    <div class="seg fill"></div>
    <div class="seg"></div>
    <div class="seg"></div>
    <div class="progradient"></div>
</div>

<div class="progressBar large">
    <div class="seg fill flex">
        <div class="text">Test</div>
    </div>
    <div class="seg fill flex">
        <div class="text">Test</div>
    </div>
    <div class="seg fill flex">
        <div class="text">Test</div>
    </div>
    <div class="seg"></div>
    <div class="seg"></div>
    <div class="progradient"></div>
</div>

CSS

.flex {
    display: -webkit-flex;
    display: flex;
}

.flex > * {
    -ms-flex: 0 1 auto;
}

.progressBar {
    display: -webkit-flex;
    display: flex;
    border: 1px solid #000;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
}

.progressBar .seg {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    min-height: 20px;
    border-right: 1px solid #000;
    z-index: 2;
}

.progressBar .seg:last-of-type {
    border-right: 0;
}

.progressBar:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgb(30, 87, 153);
    background: -moz-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
    background: linear-gradient(to right, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 27%, rgba(30, 87, 153, 1) 74%, rgba(125, 185, 232, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
}

.progressBar .progradient {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.progressBar.large {
    border-radius: 40px;
}

.progressBar.large .seg {
    min-height: 40px;
}

.progressBar.large .text {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-align-self: center;
    align-self: center;
    font-size: 18px;
    text-align: center;
}

JavaScript

/** Progress Bar Animation **/
function animate_progress_bar() {
    if (!$('.progressBar').length) {
        return false;
    }

    $('.progressBar').each(function() {
        var num_total = $(this).find('.seg').length;
        var num_fill = $(this).find('.fill').length;
        var percent = 100 - ((num_fill / num_total) * 100);
        var speed = 2000 / num_fill;

        $(this).find('.progradient').animate({
            'width': percent + '%'
        }, speed);
    });
}
animate_progress_bar();