Простая кольцевая диаграмма CSS3 ⇐ CSS

[Anonymous]

Я пытаюсь создать простую кольцевую диаграмму. В настоящее время я использую только CSS(3), но не знаю, возможно ли это без JavaScript.

Что у меня есть:
http:/ /jsfiddle.net/aBP5Q/

HTML:

Код: Выделить всё

HTML

CSS:

Код: Выделить всё

.donut-container {
width: 150px;
height: 150px;
float: left;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
margin-right: 20px;
}

.donut-inner {
width: 134px;
height: 134px;
position: relative;
top: 8px;
left: 8px;
background: #FFF;
-webkit-border-radius: 65px;
-moz-border-radius: 65px;
border-radius: 65px;
}

.donut-label {
line-height: 130px;
text-align: center;
font-size: 20px;
}

Я хотел бы отобразить зеленый и синий цвета в процентах. Таким образом, отсутствие зеленого — это 0%, а полностью зеленый (360 градусов) — 100%. Возможно, даже с простой анимацией при загрузке диаграммы, если это возможно.

Ваша помощь очень ценится.

Подробнее здесь: https://stackoverflow.com/questions/205 ... onut-chart