<div class="circle">
<div class="semi semi1">
<div class="inner" :style="{ animationDuration: 30 + 's'}"></div>
</div>
<div class="semi semi2">
<div class="inner" :style="[{ animationDuration: 30 + 's'},{animationDelay: 30 + 's'}]"></div>
</div>
</div>
.circle {
width: 200px;
height: 200px;
border-radius: 100px;
position: relative;
}
.semi {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #fff;
clip: rect(0 200px 200px 100px);
}
.semi .inner {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #f00;
clip: rect(0 100px 200px 0);
}
.semi2 {
clip: rect(0 100px 200px 0);
}
.semi2 .inner {
clip: rect(0 200px 200px 100px);
}
@keyframes sector {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
.semi1 .inner {
animation: sector 5s linear 0s forwards;
}
.semi2 .inner {
animation: sector 5s linear 5s forwards;
}