Gauges

css.css

.cpt-rank-stats .cpt-rank-right-circle {
	background: #bebebe;

	height: 90px;
	width : 45px;
	border-radius: 0 90px 90x 0;
	margin-left: -4px;

	overflow: hidden;
	vertical-align: top;
}

.cptup .cpt-rank-right-circle-inner {
	background: #63c463;
	width: 76px;
	border-radius: 100px;

	-webkit-transition: height 2.0s ease;
	-moz-transition: height 2.0s ease;
	-o-transition: height 2.0s ease;
	transition: height 2.0s ease;

	margin-left: -25px;
}

.cptup .cpt-rank-left-circle {
	background: #bebebe;

	height: 90px;
	width : 45px;
	border-radius: 90px 0 0 90px;

	overflow: hidden;
	vertical-align: top;
}

.cptup .cpt-rank-left-circle-inner {
	background: #63c463;
	width: 96px;
	border-radius: 100px;

	-webkit-transition: height 2.0s ease;
	-moz-transition: height 2.0s ease;
	-o-transition: height 2.0s ease;
	transition: height 2.0s ease;

	margin-left: -15px;
}

js.coffee

# Circles css. 
if percent > 50
	percent = 59 if 50.2 < percent < 59
	el.find('.cpt-rank-left-circle-inner')
		.height "#{(percent - 50) * 2}%"
	# The right one is complete.
	el.find('.cpt-rank-right-circle-inner')
		.height '100%'
else
	# The left one is empty.
	percent = 9 if 0.2 < percent < 9
	el.find('.cpt-rank-right-circle-inner')
		.css height: (percent*2)+'%'