.circle-wrap{float:left;margin:2rem;width:150px;height:150px;background:#a399b4;border-radius:50%}.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,74px)}.circle-wrap .circle .mask .fill{clip:rect(0px,75px,150px,0px);background-color:#61d4f2}.circle-wrap.firstPercentage .circle .mask.full,.circle-wrap.firstPercentage .circle .fill{animation:firstPercentage ease-in-out 3s forwards;animation-delay:3s}.circle-wrap.secondPercentage .circle .mask.full,.circle-wrap.secondPercentage .circle .fill{animation:secondPercentage ease-in-out 3s forwards;animation-delay:3s}.circle-wrap.thirdPercentage .circle .mask.full,.circle-wrap.thirdPercentage .circle .fill{animation:thirdPercentage ease-in-out 3s forwards;animation-delay:3s}.circle-wrap.fourthPercentage .circle .mask.full,.circle-wrap.fourthPercentage .circle .fill{animation:fourthPercentage ease-in-out 3s forwards;animation-delay:3s}.circle-wrap .inside-circle{display:flex;flex-direction:column;justify-content:center;position:absolute;width:130px;height:130px;border-radius:50%;background:#fff;margin-top:10px;margin-left:10px;z-index:1;font-weight:700;font-size:2em;text-align:center}@keyframes firstPercentage{0%{transform:rotate(0)}100%{transform:rotate(169deg)}}@keyframes secondPercentage{0%{transform:rotate(0)}100%{transform:rotate(169deg)}}@keyframes thirdPercentage{0%{transform:rotate(0)}100%{transform:rotate(149deg)}}@keyframes fourthPercentage{0%{transform:rotate(0)}100%{transform:rotate(169deg)}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}