* {margin:0; padding:0;}
.conainer {width: 600px; margin:100px auto; font-family: 'Arial'}
.circle_percent1 {font-size:150px; font-style: italic; color:black; width:1em; height:1em; position: relative; background: #8bbdd9; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_percent2 {font-size:150px; font-style: italic; color:black; width:1em; height:1em; position: relative; background: #8bbdd9; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_percent3 {font-size:150px; font-style: italic; color:black; width:1em; height:1em; position: relative; background: #8bbdd9; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_percent4 {font-size:150px; font-style: italic; color:black; width:1em; height:1em; position: relative; background: #8bbdd9; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_percent5 {font-size:150px; font-style: italic; color:black; width:1em; height:1em; position: relative; background: #8bbdd9; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_percent6 {font-size:150px; font-style: italic; color:black; width:1em; height:1em; position: relative; background: #8bbdd9; border-radius:50%; overflow:hidden; display:inline-block; margin:20px;}
.circle_inner {position: absolute; left: 0; top: 0; width: 1em; height: 1em; clip:rect(0 1em 1em .5em);}
.round_per1 {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #ff0000; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:3.00s;}
.round_per2 {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #ff9900; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:3.00s;}
.round_per3 {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #ffff00; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:3.00s;}
.round_per4 {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #009900; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:3.00s;}
.round_per5 {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #0033cc; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:3.00s;}
.round_per6 {position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #990099; clip:rect(0 1em 1em .5em); transform:rotate(180deg); transition:3.00s;}
.percent_more1 .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more2 .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more3 .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more4 .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more5 .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more6 .circle_inner {clip:rect(0 .5em 1em 0em);}
.percent_more1:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #ff0000; content:'';}
.percent_more2:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #ff9900; content:'';}
.percent_more3:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #ffff00; content:'';}
.percent_more4:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #009900; content:'';}
.percent_more5:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #0033cc; content:'';}
.percent_more6:after {position: absolute; left: .5em; top:0em; right: 0; bottom: 0; background: #990099; content:'';}
.circle_inbox {position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #fff; z-index:3; border-radius: 50%;}
.percent_text {position: absolute; font-size: 36px; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3;}