JSFiddle - React, Tailwind, and code Playground

by kyleshevlin

HTML

<div id="progressbar">
    <div>
    </div>
</div><!-- /#progressbar -->

CSS

#progressbar {
    width: 400px;
    height: 22px;
    border: 1px solid #111;
    border-radius: 4px;
    background-color: #292929;
    box-shadow: 0px 2px 6px #666; 
}

#progressbar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px;
    width: 0;
    background-color: #0099ff;
}

JavaScript

function progress(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
}

progress(80, $('#progressbar'));