CSS3 simple tableau de donut

Ce que je suis en train de faire est de créer un simple beignet graphique. Je suis actuellement en utilisant le CSS(3), mais je ne sais pas si c'est possible sans javascript.

Ce que j'ai à ce jour:
http://jsfiddle.net/aBP5Q/

HTML:

<div class="donut-container" style="background: #9C0;">
    <div class="donut-inner">
        <div class="donut-label">HTML</div>
    </div>
</div>

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

Je voudrais afficher le vert et le bleu et les couleurs comme le pourcentage. Donc pas de vert est de 0% et le plein de vert (360 degrés) est de 100%. Peut-être même avec une animation simple lorsque le graphique est chargé si possible.

Votre aide est très appréciée.

source d'informationauteur JasonK

j'ai écrit cela comme un commentaire de réponse, mais il était trop long :

hm... et bien, voici un violon pour le deuxième cercle http://jsfiddle.net/LgtV2/ .... il dispose de 3 tarte pièces. le premier cercle (100%) dispose de 5 pièces. vous devez jouer avec le violon pour apprendre comment il fonctionne, et vous pouvez les reproduire. je n'ai jamais fait cela avant et je suis simplement en regardant le lien de San posté, mais il semble que ce n'utilise plusieurs Divs avec le css3 de TRANSFORMER la forme des courbes, et la pseudo-sélecteurs :before et :after pour les animations. Les animations se produire que la page elle-même est en cours de chargement... par exemple: :avant div1 des charges il a une transformation de 5, il charge et a une transformation de 8 :après la charge, il a une transformation de 11.

code:

<div class="half_pie">
<div class="half_part_pie_one half_bar_color half_percentage" data-percentage="35"></div>
<div class="half_part_pie_two"></div>
<div class="half_part_pie_three"></div> <span class="half_pie_icon iconfont-android"></span>
</div>
/*percentage STEPS (do not touch)*/
.full_percentage[data-percentage="100"] {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.full_percentage[data-percentage="95"] {
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
transform: rotate(170deg);
}
.full_percentage[data-percentage="90"] {
-webkit-transform: rotate(155deg);
-moz-transform: rotate(155deg);
-o-transform: rotate(155deg);
transform: rotate(155deg);
}
.full_percentage[data-percentage="85"] {
-webkit-transform: rotate(125deg);
-moz-transform: rotate(125deg);
-o-transform: rotate(125deg);
transform: rotate(125deg);
}
.full_percentage[data-percentage="80"] {
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
}
.full_percentage[data-percentage="75"] {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.full_percentage[data-percentage="70"] {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
.full_percentage[data-percentage="65"] {
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
}
.full_percentage[data-percentage="60"] {
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.full_percentage[data-percentage="55"] {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.full_percentage[data-percentage="50"] {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.half_percentage[data-percentage="50"] {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.half_percentage[data-percentage="45"] {
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
transform: rotate(170deg);
}
.half_percentage[data-percentage="40"] {
-webkit-transform: rotate(155deg);
-moz-transform: rotate(155deg);
-o-transform: rotate(155deg);
transform: rotate(155deg);
}
.half_percentage[data-percentage="35"] {
-webkit-transform: rotate(125deg);
-moz-transform: rotate(125deg);
-o-transform: rotate(125deg);
transform: rotate(125deg);
}
.half_percentage[data-percentage="30"] {
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
}
.half_percentage[data-percentage="25"] {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.half_percentage[data-percentage="20"] {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
.half_percentage[data-percentage="15"] {
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
}
.half_percentage[data-percentage="10"] {
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.half_percentage[data-percentage="5"] {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.half_percentage[data-percentage="0"] {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
/*
*
* THE SECOND EXAMPLE
* the second example for a max percentuage of 50% in this case
*
*/
/*COLOR and STYLES (note: you can use gradients for the class full_bar_color)*/
.half_bar_color {
background: #3498db;
}
/*start chart pie code*/
.half_pie {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
/*the background white circular color*/
.half_pie:before {
content:'';
display: block;
position: absolute;
z-index: -1;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
/*color white #fff to fix the rendering problem*/
.half_pie:after {
content:'';
display: block;
position: absolute;
z-index: 10;
width: 198px;
height: 198px;
top: 1px;
left: 1px;
-webkit-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
/*the icon*/
span.half_pie_icon {
position: absolute;
z-index: 5;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
font-size: 3em;
line-height: 150px;
text-align: center;
color: #e0e0e0;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
/*ONE*/
.half_part_pie_one {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 100px 200px 0px);
}
/*TWO*/
.half_part_pie_two {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 100px 200px 0px);
}
/*THREE*/
.half_part_pie_three {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 200px 200px 100px);
-webkit-animation: half_third 4s linear;
-moz-animation: half_third 4s linear;
-o-animation: half_third 4s linear;
animation: half_third 4s linear;
opacity: 0;
}
/*THIRD animation*/
@-webkit-keyframes half_third {
0% {
opacity: 1;
-webkit-transform: rotate(0deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(180deg);
}
}
@-moz-keyframes half_third {
0% {
opacity: 1;
-moz-transform: rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: rotate(180deg);
}
}
@-o-keyframes half_third {
0% {
opacity: 1;
-o-transform: rotate(0deg);
}
100% {
opacity: 1;
-o-transform: rotate(180deg);
}
}
@keyframes half_third {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
opacity: 1;
transform: rotate(180deg);
}
}

Dans le cas où vous avez besoin pour créer un beignet graphique de l'animation (de la simple css) et aussi besoin de plusieurs couleurs pour cela, alors vérifier la codepen exemple, j'ai créé.

http://codepen.io/hilar47/pen/RprXev

<div class="container">
<div class="donut-chart-block block"> 
<div class="donut-chart">
<div id="part1" class="portion-block"><div class="circle"></div></div>
<div id="part2" class="portion-block"><div class="circle"></div></div>
<div id="part3" class="portion-block"><div class="circle"></div></div>
<p class="center"></p>        
</div>

Vous devez vous connecter pour publier un commentaire.