JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<div id="progressBar">
    <div></div>
</div>

CSS

* {
    color: #8F8F8F;
    font: 11px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
}

#progressBar {
		width: 570px;
		height: 19px;
		border: 1px solid #E6AA31;
        background: repeating-linear-gradient(-45deg, #FFFF99, #FFFF99 3px, #FFCC00 5px, #FFCC00 7px) repeat scroll 0 0 rgba(0, 0, 0, 0);		
        box-shadow: 0 2px 2px 0 #CCCCCC;
}

#progressBar div {
		height: 100%;
        width: 0px;
        font-size: 11px;
		text-align: right;
		line-height: 19px; 
		background: linear-gradient(#FFFF99 1px, #FFCC00 9px) repeat scroll 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 1px 0 1px #FFFFFF inset;
        opacity: 0.8;
        text-shadow: 0 1px 0 #FFFFFF;
        color: #828282;
        text-align: center;
}

JavaScript

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

$(document).ready(function() {
    progress(74, $('#progressBar'));
});