CSS3 animated pie charts

by DJS Baker

HTML

<div class="ball"><p>20%</p></div>
<div class="ball2"><p>80%</p></div>
<div class="ball3"><p>50%</p></div>

CSS

body {background: #000; color: #fff;}

p {color:#fff; text-align: center; padding: 15px 0 0; 
    -moz-animation:nospin 0s linear;
    -webkit-animation:nospin 0s linear;
}

.ball {
    border:10px solid #fff;
    opacity:.9;
    border-top:10px solid red;
    border-left:10px solid red;
    border-right: 10px solid red;
    border-radius:50px;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spin .5s linear;
    -webkit-animation:spin .5s linear;
    float: left;
    margin: 10px;
}
.ball2 {
    border:10px solid #fff;
    opacity:.9;
    border-top:10px solid red;
    border-radius:50px;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spin .5s linear;
    -webkit-animation:spin .5s linear;
    float: left;
    margin: 10px;
}
.ball3 {
    border:10px solid #fff;
    opacity:.9;
    border-top:10px solid red;
    border-left:10px solid red;
    border-radius:50px;
    width:50px;
    height:50px;
    margin:0 auto;
    -moz-animation:spin .5s linear;
    -webkit-animation:spin .5s linear;
    float: left;
    margin: 10px;
}
@-moz-keyframes spin {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg); }
}

@-webkit-keyframes spin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
}
@-moz-keyframes nospin {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(0deg); }
}

@-webkit-keyframes nospin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(0deg); }
}