By way of a starting point, have a look at:
HTML
<div class='circle'></div>
<div class='circle25'></div>
<div class='circle50'></div>
<div class='circle75'></div>
<div class='circle100'></div>
CSS
div[class^=circle] {
background:white;
border-radius:100%;
display:inline-block;
height:20px;
width:20px;
overflow:hidden;
position:relative;
}
div[class^=circle]:after {
content:'';
position:absolute;
display:block;
height:100%;
left:0;
background:orange;
}
div.circle25:after {
width:25%;
}
div.circle50:after {
width:50%;
}
div.circle75:after {
width:75%;
}
div.circle100:after {
width:100%;
}