Diego vamos por partes.
Primeiro o estilo clip:rect();
foi descontinuado. Agora o que se usa é o Clip-Path
Além disso o Rect quer dizer retângulo, antão nunca daria certo trabalhar com ele em forma de círculo. Para isso existe o clip-path:circle();
Referência do clip:rect();
(deprecated): https://developer.mozilla.org/en-US/docs/Web/CSS/clip
Referência do clip-path:circle();
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Agora vamos ao que interessa, o código!
Usei como base o design e código que você postou, e fiz a animação usando @keyframes
está 100% CSS não tem script. A técnica que eu usei não usa o clip:rect();
mas o resultado pode te interessar...
É um modelo bem simples mesmo, mas é para fins didáticos e você ver funcionando com o seu próprio código. Se quiser depois te passo uns links com modelo mais sofisticados só com CSS também.
.percent {
position: absolute;
background-color: #000;
width: 80px;
height: 80px;
left: 0;
right: 0;
top: 50px;
margin: auto;
border-radius: 50%;
}
.slice {
width: 64px;
height: 64px;
border: 4px solid #fff;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
.bar1 {
border: 4px solid #f00;
border-radius: 50%;
width: 64px;
height: 64px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
-webkit-animation: loader1 4s linear infinite;
animation: loader1 4s linear infinite;
}
.bar2 {
border: 4px solid #f00;
border-radius: 50%;
width: 64px;
height: 64px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
-webkit-animation: loader2 4s linear infinite;
animation: loader2 4s linear infinite;
}
@-webkit-keyframes loader1 {
0% {
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
}
25% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
}
50% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
}
75% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-left: 4px solid transparent;
}
100% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-left: 4px solid red;
}
}
@keyframes loader1 {
0% {
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
}
25% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
}
50% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
}
75% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-left: 4px solid transparent;
}
100% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-left: 4px solid red;
}
}
@-webkit-keyframes loader2 {
0% {
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid red;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid red;
border-left: 4px solid red;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-left: 4px solid red;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader2 {
0% {
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid transparent;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
50% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid red;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
border-top: 4px solid red;
border-right: 4px solid transparent;
border-bottom: 4px solid red;
border-left: 4px solid red;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
border-top: 4px solid red;
border-right: 4px solid red;
border-bottom: 4px solid red;
border-left: 4px solid red;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="percent">
<div class="slice"></div>
<div class="bar1"></div>
<div class="fill"></div>
</div>
<div class="percent" style="margin-left: 100px">
<div class="slice"></div>
<div class="bar2"></div>
<div class="fill"></div>
</div>