<div class="progress"></div>
.progress {
width:60px;
height:60px;
border-radius: 50%;
-webkit-mask:linear-gradient(0deg,#000 55%,#0000 0) bottom/100% 18.18%;
background:
linear-gradient(#f03355 0 0) bottom/100% 0% no-repeat
#ddd;
animation:p 2s infinite steps(7);
}
@keyframes p {
100% {background-size:100% 115%}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.