CSS radial progress bar - Animate All the Things!

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.1/less.min.js"></script>
<div id="bar">
    <!-- Circle 1 -->
    <div class="radial-progress" id="c1" 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 class="shadow"></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);

.numbers {
    text-align: left;
}

#bar {
    
    width: 100%;
    background: black;
    height: 300px;
    margin: auto;
    text-align:center;
}

.radial-progress {
    display:inline-block;
	@circle-size: 120px;
	@circle-background: #d6dadc;
	@circle-color: #FF5A00;
	@inset-size: 90px;
	@inset-color: #fbfbfb;
	@transition-length: 1s;
	@shadow: 6px 6px 10px rgba(0,0,0,0.2);
	@percentage-color: #FF5A00;
	@percentage-font-size: 22px;
	@percentage-text-width: 57px;
   // float:left;
	//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...

JavaScript

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();

window.circle = function() {
	$('#c1').attr('data-progress', '55');
    $('#c2').attr('data-progress', '15');
    $('#c3').attr('data-progress', '35');
    $('#c4').attr('data-progress', '45');
}
setTimeout(window.circle, 200);