I have to make a loader in which a fixed circle appears at the bottom and another circle appears at the top that is filled in above the previous circle.
The idea is to do something like this example, which you can see in the image below. The charger fills up and then returns to the initial state and fills up again in an infinite cycle.
Comment in Portuguese:
B2B loader
The upper layer peeled from the left to the right, not felt by two clockwork, simulating a rotation to or pressing gradually 360º. The moments presented here represent only 5 frames of a continuous movement.
upper layer
Animated Element - Cincunferência com o Gradient Element B2C (#9E48C9 / #2873FE)lower layer
Fixed element - Circumference to M-04--Light-02 #C39FDE
Spanish translation of the Portuguese comment:
B2B charger
The upper layer is peeled off from left to right, clockwise, simulating a rotation gradually filling the 360º. The moments presented here represent only 5 frames of continuous motion.
top layer
Animated element: Match B2C gradient element (#9E48C9 / #2873FE)bottom layer
Fixed element - Matches M-04 - Light-02 #C39FDE
I have already posted the code I have. What I want is for it to gradually increase clockwise, that is, in 5 stages: 0º, 90º, 270º, 180º, 360º . In each of these stages the loader must be increased , and when it reaches 360º the process must be repeated.
.edp-loader {
border: 10px solid #C39FDE;
border-radius: 50%;
border-top: 10px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="edp-loader"></div>