Сам давно интересовался. Сейчас придумал такое решение, минимум 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, поэтому их можно смело ставить несколько.
Посмотреть как оно работает