JSFiddle - React, Tailwind, and code Playground

by Jennifer Perrin

HTML

<div class="progress_container">
    <div class="progress_bar" title="50%">
        <span>50%</span>
    </div>
</div>
<div class="progress_container">
    <div class="progress_bar" title="90%">
        <span>90%</span>
    </div>
</div>
<div class="progress_container">
    <div class="progress_bar" title="10%">
        <span>10%</span>
    </div>
</div>

CSS

.progress_container {
    height: 25px;
    overflow: hidden;
    background: #555;
    width: 100%;
}
.progress_bar {
    height: 25px;
    width: 0px;
    background: #cc3d3d;
}
.progress_bar span {
    font-size: 12px;
    line-height: 25px;
    margin-left: 6px;
    color: #fff;
}
.progress_container {
    margin-bottom: 30px;
}

JavaScript

$("document").ready(function () {

    $('.progress_bar').each(function () {
        var percent = $(this).attr('title');
        $(this).animate({
            width: percent
        }, 2500);
    });
});