CSS radial progress bar - Prettifying

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div class="radial-progress">
	<div class="circle">
		<div class="mask full">
			<div class="fill"></div>
		</div>
		<div class="mask half">
			<div class="fill"></div>
			<div class="fill fix"></div>
		</div>
		<div class="shadow"></div>
	</div>
	<div class="inset"></div>
</div>

CSS

.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);

	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;
		}
		.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;
	}
}

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function() { 
	var rotation = Math.floor(Math.random() * 180);
	var fill_rotation = rotation;
	var fix_rotation = rotation * 2;
	for(i in transform_styles) {
		$('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
		$('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
	}
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

// Read more here: https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9