CSS radial progress indicator - HAL

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<main>
<div class="radial-progress" data-progress="0">
	<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>
	<div class="inset">
		<div class="percentage">
			<div...

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@container-height: 400px;
@container-width: 600px;
main {
	background: radial-gradient(#424242, #000000);
	width: @container-width;
	height: @container-height;
}
.radial-progress {
	@circle-size: 200px;
	@circle-background: white;
	@inset-size: 180px;
	@inset-background: white;
	@transition-length: 1s;
	@percentage-color: rgba(0,0,0,0.13);
	@percentage-font-size: 22px;
	@percentage-text-width: 57px;

	position: absolute;
	top: (@container-height - @circle-size)/2;
	left: (@container-width - @circle-size)/2;
	width:  @circle-size;
	height: @circle-size;

	border-radius: 50%;
	.circle {
		.mask, .fill {
			width:    @circle-size;
			height:   @circle-size;
			position: absolute;

			-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: @circle-background;
			}
		}
	}
	.inset {
		width:       @inset-size;
		height:      @inset-size;
		position:    absolute;
		margin-left: (@circle-size - @inset-size)/2;
		margin-top:  (@circle-size - @inset-size)/2;

		background: @inset-background;
		border-radius: 50%;
		.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;

			.numbers {
				margin-top: -@percentage-font-size;
				transition: width @transition-length;
				span {
					width:          @percentage-text-width;
					line-height:    1;
					display:        inline-block;
					vertical-align: top;

					text-align:     center;
					font-weight:   ...

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
	$('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

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