.progress {
	position: relative;
	height: 31px;
	background: #E34747;
	background-image: -ms-linear-gradient(left, #5FB365 0%, #E34747 100%);
	background-image: -moz-linear-gradient(left, #5FB365 0%, #E34747 100%);
	background-image: -o-linear-gradient(left, #5FB365 0%, #E34747 100%);
	background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #5FB365), color-stop(100, #E34747));
	background-image: -webkit-linear-gradient(left, #5FB365 0%, #E34747 100%);
	background-image: linear-gradient(to right, #5FB365 0%, #E34747 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#00ff00', GradientType=1);
}

.barometer {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	transition: all 0.8s;
	background: gray;
	width: 0;
}

.progress:before {
	content: attr(data-amount) "%";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	text-align: center;
	line-height: 31px;
}

canvas {
	width: 200px !important;
	height: 100px !important;
}