JetFightzer

Сам давно интересовался. Сейчас придумал такое решение, минимум css и js кода, без фреймворков и должно работать на всех современных браузерах.

CSS

.pie
{
	position: relative;
	margin: 200px auto 0;
	width: 140px;
	height: 140px;
	border-radius: 50%;
}

.pieone, .pietwo, .pieone div, .pietwo div
{
	position: absolute;
	top: 0;
	left: 0;
}

.pie > div > div
{
	width: 100px;
	height: 100px;
	border: solid 20px #66AAFF;
	border-radius: 50%;
	clip: rect(0px, 70px, 140px, 0px);
}

.pieone
{
	clip: rect(0px, 140px, 140px, 70px);
}

.pietwo
{
	clip: rect(0px, 70px, 140px, 0px);
}

.pietwo div
{
	display: none;
}

HTML

<div id="myPie" class="pie">
	<div class="pieone"><div></div></div>
	<div class="pietwo"><div></div></div>
</div>

JS

function pie(id, deg)
{
	var oneStyle = document.getElementById(id).querySelector(".pieone > div").style
	var twoStyle = document.getElementById(id).querySelector(".pietwo > div").style


	if(deg > 180)
	{
		oneStyle.transform = oneStyle.webkitTransform = "rotate(180deg)"
		twoStyle.transform = twoStyle.webkitTransform = "rotate(" + deg + "deg)"
		twoStyle.display = "block"
	}
	else
	{
		oneStyle.transform = oneStyle.webkitTransform = "rotate(" + deg + "deg)"
		twoStyle.display = "none"
	}
}

// Пример работы
deg = 0
setInterval(function() { pie("myPie", (deg += 15) % 360) }, 100)

Функция работает с таймером по id, поэтому их можно смело ставить несколько.

Посмотреть как оно работает