Circle animation (percentage) with css

Question

How to make circular circles, which are on the following website http://www.awwwards.com/

For my site, I do not need it to be dynamic. At least not this time. I have tried various solutions with both Javascript and CSS, but I'm not sure if this is the best way to create this.

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

That's almost all I know about transitions, but I think that's enough. However, I would need my pie to be cut out before the transition, right?

Does anyone know where I should start?

Answer 1

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

UPDATE

I did not like this solution, so I tried to implement it myself and with a little help (I asked a few questions here). I manage to do it quite elegantly.

The basic idea is to figure out how to draw a sector of a circle, and then start drawing a section with degree = 0 until you reach the desired degree.

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 by the current percentage. The preliminary range will contain the text percentage as well as the total degrees you want (270) in this example. When I implemented it, the percentage should be second grade.

CSS

This is the hard part. This is the hard part. I draw a 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 shown in degrees + 90. If the degrees are greater than 180, we will 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 is a working demo

Note This works for firefox and chrome. You need to add IE support for linear-gradient .

Answer 2

I liked Itai Gal because of its simplicity, using only CSS and Javascript.

I was able to simplify it further, and also made it more like an example of the real world, so that it starts whenever the function is called (at startup or when you call it). Just skip the percentage where you want to stop it.

It works in all modern browsers, including IE10 +. Properly degrades 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); } }