JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<link rel="stylesheet" href="https://pistachio-cdn.graze.com/0.0.4/css/pistachio.css">
<div class="progress text-center opc-progress-bar">
    <div class="progress__bar">
        <div class="progress__bar__fill" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0%" style="width: 0%;"></div>
    </div>
    <div class="progress__labels">
        <div class="progress__label opc-progress-bar-item _active">
            <p data-bind="text: $t(item.title), click: $parent.navigateTo">One</p>
        </div>
        <div class="progress__label opc-progress-bar-item">
            <p data-bind="text: $t(item.title), click: $parent.navigateTo">Two</p>
        </div>
        <div class="progress__label opc-progress-bar-item">
            <p data-bind="text: $t(item.title), click: $parent.navigateTo">Three</p>
        </div>
    
        <div class="progress__label opc-progress-bar-item">
            <p data-bind="text: $t(item.title), click: $parent.navigateTo">Four</p>
        </div>
    
        <div class="progress__label opc-progress-bar-item">
            <p data-bind="text: $t(item.title), click: $parent.navigateTo">Five</p>
        </div>
    </div>
</div>

<button>next step</button>

SCSS

.progress {
    ._complete {
        p {
            cursor: pointer;
        }
    }
}

.progress__labels {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.progress__label {
    display: table-cell;
}

JavaScript

var steps = $('.opc-progress-bar-item');
var activeStep = steps.index($('._active'));


function updateProgress() {
    var progress = (activeStep + 1) / steps.length * 100;
    $('.progress__bar__fill').css('width', progress + "%");
}
updateProgress();

$('button').click(function() {
    activeStep = (activeStep + 1) % steps.length;
    
    steps.removeClass('_active');
    steps.eq(activeStep + 1).addClass('_active');
    updateProgress();
});