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.

Answer 2

I liked Itay Gal's answer because of its simplicity, using only CSS and Javascript.

I was able to simplify it further, and also made it more of a real world example, so that it runs whenever the function is called (at startup or whenever you call it). Simply pass in the percentage number where you want it to stop.

Works in all modern browsers, including IE10+. Degrades gracefully in older browsers.

JSFiddle demo: https://jsfiddle.net/ggj55sqo/

HTML

<div id="sellPerCirc" class="perCirc">
    <div class="perCircInner">
        <div class="perCircStat">0%</div><div>Complete</div>
    </div>
</div>

CSS

.perCirc {
    position: relative;
    text-align: center;
    width: 110px;
    height: 110px;
    border-radius: 100%;
    background-color: #00cc00;
    background-image: linear-gradient(91deg, transparent 50%, #ccc 50%), linear-gradient(90deg, #ccc 50%, transparent 50%);
}
.perCirc .perCircInner {
    position: relative;
    top: 10px;
    left: 10px;
    text-align: center;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background-color: #eee;
}
.perCirc .perCircInner div {
    position: relative;
    top: 22px;
    color:#777;
}
.perCirc .perCircStat {
    font-size: 30px;
    line-height:1em;
}

JQuery

// change the value below from 80 to whichever percentage you want it to stop at.
perCirc($('#sellPerCirc'), 80);

function perCirc($el, end, i) {
    if (end < 0)
        end = 0;
    else if (end > 100)
        end = 100;
    if (typeof i === 'undefined')
        i = 0;
    var curr = (100 * i) / 360;
    $el.find(".perCircStat").html(Math.round(curr) + "%");
    if (i <= 180) {
        $el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #ccc 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
    } else {
        $el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #00cc00 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
    }
    if (curr < end) {
        setTimeout(function () {
            perCirc($el, end, ++i);
        }, 1);
    }
}