JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		  
			<div class="meter">
				<span style="width: 33.3%"></span>
			</div>
					
			<div class="meter">
				<span style="width: 80%"></span>
			</div>

CSS

* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif;height: 2000px; }

#page-wrap { width: 960px; margin: auto;}

body {text-align: center; color:#000000 }
h1 { font-size: 42px; font-weight: 600; margin: 0 0 30px 0; }

.meter { 
			height: 20px; 
			position: relative;
			margin: 60px 0 20px 0;
			background: #555;
			-moz-border-radius: 25px;
			-webkit-border-radius: 25px;
			border-radius: 25px;
			padding: 10px;
			-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
			-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
			box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
		}
		.meter > span {
			display: block;
			height: 100%;
			   -webkit-border-top-right-radius: 8px;
			-webkit-border-bottom-right-radius: 8px;
			       -moz-border-radius-topright: 8px;
			    -moz-border-radius-bottomright: 8px;
			           border-top-right-radius: 8px;
			        border-bottom-right-radius: 8px;
			    -webkit-border-top-left-radius: 20px;
			 -webkit-border-bottom-left-radius: 20px;
			        -moz-border-radius-topleft: 20px;
			     -moz-border-radius-bottomleft: 20px;
			            border-top-left-radius: 20px;
			         border-bottom-left-radius: 20px;
			background-color: yellow;position: relative;
			overflow: hidden;
		}

JavaScript

$(function() {

				$(".meter > span").each(function() {
					$(this)
						.data("origWidth", $(this).width())
						.width(0)
						.animate({
							width: $(this).data("origWidth")
						}, 1200);
				});

		});