Анимация кругового круга (процент) с помощью css

Как я могу сделать круговые круги, которые находятся на следующем сайте: http://www.awwwards.com/

Для моего сайта мне не нужно быть динамичным. По крайней мере, не в этот раз. Я опробовал различные решения, как с Javascript, так и с CSS, но я не уверен, что лучший способ создать это.

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

Это почти все, что я знаю о переходах, но я думаю, что это достаточно. Тем не менее, мне нужно было бы, чтобы мой «пирог» пирога вырезали до начала перехода, не так ли?

Кто-нибудь знает, с чего мне начать?

Вы можете прочитать эту статью и посмотреть рабочий пример и даже понять, как он работает css-pie-timer

ОБНОВИТЬ

Мне не понравилось это решение, поэтому я попытался реализовать его сам и с небольшой помощью (я задал несколько вопросов здесь). Мне удается сделать это довольно элегантно.

Основная идея состоит в том, чтобы понять, как нарисовать сектор круга, а затем начать рисовать раздел со степенью = 0, пока не достигнете нужной степени.

Я также сделал его обратимым, просто для удовольствия :).

HTML

 
0%

Активная граница будет заменена текущим процентом. Предварительный диапазон будет содержать текстовый процент, а также общие степени, которые вы хотите (270) в этом примере. Когда я его реализовал, этот процент должен быть вторым classом.

CSS

Это сложная часть. Это сложная часть. Я рисую сектор таким образом:

 .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%); } 

Объяснение: первое значение linear-gradient будет равным gradleусам + 90. Если gradleусы больше 180, мы будем устанавливать первый цвет linear-gradient на наш активный цвет.

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); } 

И вот рабочая демонстрация

Примечание. Он работает для firefox и chrome. Вам нужно будет добавить поддержку IE для linear-gradient .

Мне понравился ответ Итай Гала из-за его простоты, используя только CSS и Javascript.

Я смог упростить его дальше, а также сделал его более реальным примером, чтобы он запускался всякий раз, когда вызывается функция (при запуске или когда вы ее называете). Просто передайте процентное число, где вы хотите его остановить.

Работает во всех современных браузерах, включая IE10 +. В старых браузерах грамотно деgradleирует.

Демо JSFiddle: https://jsfiddle.net/ggj55sqo/

HTML

 
0%
Complete

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); } }