Circle animation

without data-progress

by Zareh Geertjes

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>
	<div class="inset">
	</div>
</div>

CSS

.radial-progress {
	@circle-size: 100px;
	@circle-background: #fff;
	@circle-color: #00DE3B;
    
	@inset-size: 90px;
	@inset-color: #d5d5d5;
    
	@transition-length: 1s;
    
    @img: "";
    @imgborder: 2px;

	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%;
		}
		.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 - (@imgborder * 2);
		height:      @inset-size - (@imgborder * 2);
		position:    absolute;
		margin-left: (@circle-size - @inset-size)/2;
		margin-top:  (@circle-size - @inset-size)/2;
		background-color: @inset-color;
        background-image: url(@img);
        background-size: 100%;
		border-radius: 50%;
        border: @imgborder solid #fff;
	}

	@i: 0;
	@increment: 180deg / 100;
	.loop (@i) when (@i <= 100) {
		&.go {
			.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);
				}
			}
		}
		.loop(@i + 1);
	}
	.loop(@i);
}

JavaScript

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


go = function() {
	$('.radial-progress').addClass('go');
}
$('.radial-progress').click(go);