JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

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

CSS

.progress_container {
    height:25px;
    border-radius: 3px;
    overflow:hidden;
    background:red;
    width: 460px;
}
.progress_bar {
    color: #fff;
    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
     $('.progress_bar').each(function () {
        $(this).animate(
          {
             width: $(this).data("percent")
          }, {
            duration: 1000,
            step    : function( current ) {
                        $(this).html(parseInt(current, 10)+'%')
            }
        });
    });
});