CSS3 piechart

by toubia95

HTML

<div class="chart">
    <div class="pie left"></div>
    <div class="pie right"></div>
</div>

CSS

body {
    padding: 50px;
}

.left,.right {
    width: 50px;
    height: 100px;
    background:white;
    overflow: hidden;
    float: left;
}
.left {
    border-radius: 50px 0 0 50px;
}
.right {
    border-radius: 0 50px 50px 0;
}
.left:before, .right:before {
    content:"";
    display: block;
    width: 50px;
    height: 100px;
    background:green;
}
.right:before {
    border-radius: 0 50px 50px 0;
    transform: rotate(45deg);
    transform-origin: 0% 50% 0;
}
.left:before {
    border-radius: 50px 0 0 50px;
    transform: rotate(0deg); 
    transform-origin: 100% 50% 0;
}
.chart {
    position:relative;
}
.chart:after {
    content:"";
    display:block;
    background:white;
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    left: 25px;
    top: 25px;
}

JavaScript

/* créer un décompte de 360° sur 3 min => 2° par seconde */
/*
$('.right:before').css("transform","rotate(90deg)");
$('.right:before').css({"transform":"rotate(90deg)"});
*/
$("body").css( "background","white" );