Веб-заметки и Веб-подсказки

Выглядит примерно так:


<div class="circle-out">
<div class="progress"></div>
<div
class="circle-in"
onmouseover="increaseProgress()">
</div>
</div>



var progress = 30;
var progressEl = document.querySelector('.progress');
var increaseProgress = function() {
progress = progress + 10;
progressEl.style.transform = 'rotate('+progress+'deg)';
}



.circle-out {
position:relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ccc;
overflow: hidden;
}
.circle-in {
position: absolute;
width: 96px;
height: 96px;
margin: 2px;
border-radius: 50%;
background: white;
}
.progress {
height: 110px;
width: 220px;
background: blue;
position: absolute;
top:-110px;
left: -60px;
transform: rotate(30deg);
transform-origin: 110px 110px;
transition: all .3s;
}