Animate spinning circle(percentage) with css

Question

How can i make the spinning circles which is on the following site http://www.awwwards.com/

For my site i don't need it to be dynamic. At least not this time. I have tried out different solutions, with both Javascript and CSS, but i'm not sure what is the best method to create this.

-moz-transform: rotate(270);
-webkit-transform: rotate(270);
-o-transform:rotate(270deg);
transform: rotate(270deg);
transition: all 2s;

This is pretty much all i know about transitions, but i guess its enough. However, i would have to have my "pie" of the cake cut out before the transition start, right?

Anyone know where i should start?

Answer 1

You can read this article and see a working example and even understand how it works css-pie-timer

UPDATE

I didn't like that solution so I tried to implement it my self and with a little help (I asked few questions here) I manage to do it pretty elegant.

The main idea is to understand how to draw a circle sector and then start drawing section with degree = 0 until you reach degree you want.

I also made it reversible, just for fun :).

HTML

<div class="container">
    <div id="activeBorder" class="active-border">
        <div id="circle" class="circle">
            <span class="prec 270" id="prec">0%</span>
        </div>
    </div>
</div>

The active border will be replaced with the current percentage. The prec span will contains the textual percentage and also the total degrees you want (270) in this example. As I implemented it, the percentage needs to be the second class.

CSS

This is the tricky part. This is the tricky part. I draw the sector this way:

.active-border{
    position: relative;
    text-align: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    background-color:#39B4CC;
    background-image:
        linear-gradient(91deg, transparent 50%, #A2ECFB 50%),
        linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
}

Explanation: the first linear-gradient value will be the degrees shown + 90. If the degrees is bigger than 180 we'll set the first linear-gradient color to our active color.

JQuery

function loopit(dir){
    // choose direction
    if (dir == "c")
        i++
    else
        i--;
    // stop condition
    if (i < 0)
        i = 0;
    if (i > degs)
        i = degs;

    // calculate and set the percentage text
    prec = (100*i)/360;   
    $(".prec").html(Math.round(prec)+"%");

    if (i<=180){
        activeBorder.css('background-image','linear-gradient(' + (90+i) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }
    else{
        activeBorder.css('background-image','linear-gradient(' + (i-90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }

    // recursive call 
    setTimeout(function(){
        if($("#circle").is(":hover"))
           loopit("c");
        else
           loopit("nc");
    },1); 
}

And here's a working demo

Note It works for firefox and chrome. You'll have to add IE support for linear-gradient.