Progress Bar

progress_bar.css

*{
font-family: Helvetica;
font-size: 16px;
}
 
.progress_bar_status{
	display: inline-block;
	float: left;
	margin: 3px 10px 0px 0px;
	font-weight: 900;
	line-height: 20px;
}
.progress_bar_black{
	display: inline-block;
	width: 780px;
	height: 20px;
	background-color: #000;
	padding:2px;
	border-radius: 20px;
}
.progress_bar_green{
	width: 76px;
	height: 20px;
	border-radius: 16px;
	background-color: #5ff082;
	background-image: linear-gradient(left, rgb(0,0,0) -30px, rgb(95,240,129) 70%);
	background-image: -o-linear-gradient(left, rgb(0,0,0) -30px, rgb(95,240,129) 70%);
	background-image: -moz-linear-gradient(left, rgb(0,0,0) -30px, rgb(95,240,129) 70%);
	background-image: -webkit-linear-gradient(left, rgb(0,0,0) -30px, rgb(95,240,129) 70%);
	background-image: -ms-linear-gradient(left, rgb(0,0,0) -30px, rgb(95,240,129) 70%);
}
.progress_bar_text{
	float: right;
	margin: 0px 6px 0px 0px;
	font-size: 14px;
	line-height: 21px;
	font-weight: 900;
	color: #FFF;
}

progress_bar.html

<span class="progress_bar_status">Status: status_variable</span>
<div class="progress_bar_black">
	<div class="progress_bar_green"><span class="progress_bar_text">XX%</span></div>
</div>