Sass version of http://stackoverflow.com/a/22282658/74890

_radial-progress.scss

.radial-progress {
	$circle-size: 120px;
	$circle-background: #d6dadc;
	$circle-color: #97a71d;
	$inset-size: 90px;
	$inset-color: #fbfbfb;
	$transition-length: 1s;
	$shadow: 6px 6px 10px rgba(0,0,0,0.2);
	$percentage-color: #97a71d;
	$percentage-font-size: 22px;
	$percentage-text-width: 57px;

	margin: 50px;
	width: $circle-size;
	height: $circle-size;

	background-color: $circle-background;
	border-radius: 50%;
	.circle {
		.mask, .fill, .shadow {
			width: $circle-size;
			height: $circle-size;
			position: absolute;
			border-radius: 50%;
		}
		.shadow {
			box-shadow: $shadow inset;
		}
		.mask, .fill {
			-webkit-backface-visibility: hidden;
			transition: -webkit-transform $transition-length;
			transition: -ms-transform $transition-length;
			transition: transform $transition-length;
			border-radius: 50%;
		}
		.mask {
			clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
			.fill {
				clip: rect(0px, $circle-size/2, $circle-size, 0px);
				background-color: $circle-color;
			}
		}
	}
	.inset {
		width: $inset-size;
		height: $inset-size;
		position: absolute;
		margin-left: ($circle-size - $inset-size)/2;
		margin-top: ($circle-size - $inset-size)/2;

		background-color: $inset-color;
		border-radius: 50%;
		box-shadow: $shadow;
		.percentage {
			height: $percentage-font-size;
			width: $percentage-text-width;
			overflow: hidden;

			position: absolute;
			top: ($inset-size - $percentage-font-size) / 2;
			left: ($inset-size - $percentage-text-width) / 2;

			line-height: 1;
			.numbers {
				margin-top: -$percentage-font-size;
				transition: width $transition-length;
				span {
					width: $percentage-text-width;
					display: inline-block;
					vertical-align: top;
					text-align: center;
					font-weight: 800;
					font-size: $percentage-font-size;
					/*font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
					color: $percentage-color;
				}
			}
		}
	}

	$increment: 180deg / 100;
	@for $i from 0 through 100 {
		&[data-progress="#{$i}"] {
			.circle {
				.mask.full, .fill {
					-webkit-transform: rotate($increment * $i);
					-ms-transform: rotate($increment * $i);
					transform: rotate($increment * $i);
				}
				.fill.fix {
					-webkit-transform: rotate($increment * $i * 2);
					-ms-transform: rotate($increment * $i * 2);
					transform: rotate($increment * $i * 2);
				}
			}
			.inset .percentage .numbers {
				width: $i * $percentage-text-width + $percentage-text-width;
			}
		}
	}
}