@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
body{font-family:"Roboto",sans-serif}.circle-wrap{margin:15px auto;width:150px;height:150px;background:#fefcff;border-radius:50%;border:1px solid #cdcbd0}.circle-wrap .circle .mask,.circle-wrap .circle .fill{width:150px;height:150px;position:absolute;border-radius:50%}.circle-wrap .circle .mask{clip:rect(0px,150px,150px,75px)}.circle-wrap .inside-circle{width:122px;height:122px;border-radius:50%;background:#d2eaf1;line-height:120px;text-align:center;margin-top:14px;margin-left:14px;color:#1e51dc;position:absolute;z-index:100;font-weight:700;font-size:2em}.mask .fill{clip:rect(0px,75px,150px,0px);background-color:#227ded}.mask.full,.circle .fill{animation:fill ease-in-out 3s;transform:rotate(66deg)}@keyframes fill{0%{transform:rotate(0deg)}100%{transform:rotate(66deg)}}
body{font-family:"Roboto",sans-serif}.circle-wrap{margin:15px auto;width:150px;height:150px;background:#fefcff;border-radius:50%;border:1px solid #cdcbd0}.circle-wrap .circle .mask,.circle-wrap .circle .fill{width:150px;height:150px;position:absolute;border-radius:50%}.circle-wrap .circle .mask{clip:rect(0px,150px,150px,75px)}.circle-wrap .inside-circle{width:122px;height:122px;border-radius:50%;background:#d2eaf1;line-height:120px;text-align:center;margin-top:14px;margin-left:14px;color:#1e51dc;position:absolute;z-index:100;font-weight:700;font-size:2em}.mask .fill{clip:rect(0px,75px,150px,0px);background-color:#227ded}.mask.full,.circle .fill{animation:fill ease-in-out 3s;transform:rotate(81deg)}@keyframes fill{0%{transform:rotate(0deg)}100%{transform:rotate(81deg)}}
body{font-family:"Roboto",sans-serif}.circle-wrap{margin:15px auto;width:150px;height:150px;background:#fefcff;border-radius:50%;border:1px solid #cdcbd0}.circle-wrap .circle .mask,.circle-wrap .circle .fill{width:150px;height:150px;position:absolute;border-radius:50%}.circle-wrap .circle .mask{clip:rect(0px,150px,150px,75px)}.circle-wrap .inside-circle{width:122px;height:122px;border-radius:50%;background:#d2eaf1;line-height:120px;text-align:center;margin-top:14px;margin-left:14px;color:#1e51dc;position:absolute;z-index:100;font-weight:700;font-size:2em}.mask .fill{clip:rect(0px,75px,150px,0px);background-color:#227ded}.mask.full,.circle .fill{animation:fill ease-in-out 3s;transform:rotate(77deg)}@keyframes fill{0%{transform:rotate(0deg)}100%{transform:rotate(77deg)}}