/*COLOR and STYLES (note: you can use gradients for the class full_bar_color)*/
.full_bar_color { 
background:#FF0004;
}
.full_bar_color_2 { 
background:#FF9A00;
}
.full_bar_color_3 { 
background:#1069D2;
}
/*start pie chart code*/
.full_pie { position: relative; width: 140px; height: 140px; margin:0 10px 30px 0; display:inline-block;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}

/*color white #fff to fix the rendering problem*/
.full_pie:after { content: ''; display: block; position: absolute; z-index: 10; width: 138px; height: 138px; top: 1px; left: 1px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
/*the icon*/
span.full_pie_icon { position: absolute; z-index: 7; top: 3px; left: 3px; width: 134px; height:134px; text-align: center; color: #C7D0D5;
background: #000;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
span.full_pie_icon h2 {font-size:16px; color:#fff; padding:44px 0 0 0; line-height:22px; font-weight:100;}
span.full_pie_icon p {font-size:28px; color:#f7f7f7; font-style:normal; line-height:30px; font-weight:100;}

/*ONE*/
.full_part_pie_one { position: absolute; z-index: 4; width: 100%; height: 100%; background: #575757;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 140px 140px 70px);
-webkit-animation: full_first 2s linear;
-moz-animation: full_first 2s linear;
-o-animation: full_first 2s linear;
animation: full_first 2s linear;
opacity: 0;
}
/*TWO*/
.full_part_pie_two { position: absolute; z-index: 2; width: 100%; height: 100%; background: #575757;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 70px 140px 0px);
-webkit-animation: full_second 3.25s linear;
-moz-animation: full_second 3.25s linear;
-o-animation: full_second 3.25s linear;
animation: full_second 3.25s linear;
}
/*THREE*/
.full_part_pie_three { position: absolute; z-index: 3; width: 100%; height: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 140px 140px 70px);
}
/*FOUR*/
.full_part_pie_four { position: absolute; z-index: 3; width: 100%; height: 100%; background: #575757;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 70px 140px 0px);
-webkit-animation: full_fourth 2s linear 2s;
-moz-animation: full_fourth 2s linear 2s;
-o-animation: full_fourth 2s linear 2s;
animation: full_fourth 2s linear 2s;
opacity: 0;
}
/*FIVE*/
.full_part_pie_five { position: absolute; z-index: 5; width: 100%; height: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 140px 140px 70px);
-webkit-animation: full_fifth 4s linear;
-moz-animation: full_fifth 4s linear;
-o-animation: full_fifth 4s linear;
animation: full_fifth 4s linear;
opacity: 1;
}
/*FIRST animation*/
@-webkit-keyframes full_first {
0% { opacity: 1; -webkit-transform: rotate(0deg); }
100% { opacity: 1; -webkit-transform: rotate(180deg); }
}
@-moz-keyframes full_first {
0% { opacity: 1; -moz-transform: rotate(0deg); }
100% { opacity: 1; -moz-transform: rotate(180deg); }
}
@-o-keyframes full_first {
0% { opacity: 1; -o-transform: rotate(0deg); }
100% { opacity: 1; -o-transform: rotate(180deg); }
}
@keyframes full_first {
0% { opacity: 1; transform: rotate(0deg); }
100% { opacity: 1; transform: rotate(180deg); }
}
/*SECOND animation*/
@-webkit-keyframes full_second {
0% { z-index: 6; }
100% { z-index: 2; }
}
@-moz-keyframes full_second {
0% { z-index: 6; }
100% { z-index: 2; }
}
@-o-keyframes full_second {
0% { z-index: 6; }
100% { z-index: 2; }
}
@keyframes full_second {
0% { z-index: 6; }
100% { z-index: 2; }
}
/*FOURTH animation*/
@-webkit-keyframes full_fourth {
0% { opacity: 1; -webkit-transform: rotate(0deg); }
100% { opacity: 1; -webkit-transform: rotate(180deg); }
}
@-moz-keyframes full_fourth {
0% { opacity: 1; -moz-transform: rotate(0deg); }
100% { opacity: 1; -moz-transform: rotate(180deg); }
}
@-o-keyframes full_fourth {
0% { opacity: 1; -o-transform: rotate(0deg); }
100% { opacity: 1; -o-transform: rotate(180deg); }
}
@keyframes full_fourth {
0% { opacity: 1; transform: rotate(0deg); }
100% { opacity: 1; transform: rotate(180deg); }
}
/*FIFTH animation*/
@-webkit-keyframes full_fifth {
0% { opacity: 0; }
50% { opacity: 0; }
50.1%, 100% { opacity: 1; }
}
@-moz-keyframes full_fifth {
0% { opacity: 0; }
50% { opacity: 0; }
50.1%, 100% { opacity: 1; }
}
@-o-keyframes full_fifth {
0% { opacity: 0; }
50% { opacity: 0; }
50.1%, 100% { opacity: 1; }
}
@keyframes full_fifth {
0% { opacity: 0; }
50% { opacity: 0; }
50.1%, 100% { opacity: 1; }
}




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

/**
 * END DEMO CODE
 */
 
 /*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); }


/*end STEPS*/