JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<div class="progress_container">
    <div class="progress_bar tip" data-percent="99"></div>
</div>
<div class="progress_container">
    <div class="progress_bar tip" data-percent="100"></div>
</div>
<div class="progress_container">
    <div class="progress_bar tip" id="pb3" data-percent="28"></div>
</div>

<button id="Add">Add</button>

CSS

.progress_container {
    height:25px;
    border-radius: 3px;
    overflow:hidden;
    background:red;
    width: 460px;
}
.progress_bar {
    height:25px;
    width: 0px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    background:black;
}
.progress_container {
    margin-bottom: 30px;
}
}

JavaScript

$("document").ready(function () {
    // animate the progress bar onload
    updatePercent();
});

function updatePercent() {
    
    $('.progress_bar').each(function () {
        $(this).animate({
            width: $(this).data("percent") + "%"
        }, 1000);
    })
}

$("#Add").click(function () {
    var currVal = $("#pb3").data("percent");
    $("#pb3").data("percent", currVal + 10);
    updatePercent();
});