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>
loading animation
Strokes and combination of three (03) types of superimposed animations
To achieve the desired effect, the lines (edges) of the circumference will be manipulated. For this case, SVG will be used as the main format. Although using only CSS and HTML can achieve a similar effect, it is not exactly what we are looking for. Let's start with the HTML case first and then SVG .
HTML case
For example, for the HTML case , we are going to define two (02) elements. The first will contain the second element and the second will contain four (04) more elements that will be the four (04) circles with a solid transparent border defined, while one of its borders will have a visible color.
Let's illustrate it with the following code snippet documented in its comments. JavaScript was used to allow you to change the size, but it is not required for the animation to work:
It was observed that an approximate result is achieved, but not exactly what is desired. A different border color is established in each circumference to distinguish them from each other.
The combination of three (03) animations superimposed on each other is required to achieve the observed effect.
To understand the scenario a little better, let's separate the animations in the following code snippet:
La primera está contenida en la segunda y la segunda está contenida en la tercera circunferencia.
En esta oportunidad, las animaciones se separaron en tres (03) clases con nombres descriptivos para hacerla más entendibles. Por lo tanto, son las más importantes para lo que se desea conseguir.
Por ejemplo:
Se colocan los grados en negativo para que gire en sentido horario, es decir, partimos desde un sentido antihorario para lograr la rotación en sentido horario.
Ahora, vamos a definir las animaciones utilizando SVG, combinado con CSS.
Caso SVG
En ella crearemos un par de circunferencias, con un radio de
70px
. La primera circunferencia tendrá un borde fijo más delgado. La segunda circunferencia tendrá el borde animado.Before we start, we first need to know each parameter and each CSS property that we are going to use to play the animation.
CSS properties applied to SVG:stroke
: This property literally means stroke . That is, it represents the line or edge that will be visually represented, in this case, the circumference.stroke-width
: Here you define the thickness of the stroke.stroke-dasharray
: Forms an array of dashes. In it we will define the length of the dashes of the stroke. For example, if we define it asstroke-dasharray: 100
then, the hyphens will have a length of100px
with spaces equal to each other of100px
. Therefore, in the case of our circumference, if we want to have a dash equal to its length, we must use the mathematical formula:2πr
, that is, the radius of the circumference is multiplied byπ
what is approximately3.141592...
2.stroke-dashoffset
: In it we will move the scripts formed bystroke-dasharray
along the path of the stroke.fill
: In it we define the fill color of the figure. In this case, our circumference.cx
: Literalmente, significa coordenada x. Es decir, es la posición horizontal del centro de la circunferencia en el lienzo. En nuestro caso, si definimos un lienzo con unas proporciones de140 x 140
para centrar la circunferencia horizontalmente se debe definircx=70
, donde70
representa la mitad del ancho del lienzo.cy
: Literalmente, significa coordenada y. Por lo tanto, es la posición vertical del centro de la circunferencia en el lienzo. Si se quiere centrar verticalmente se debe realizar un paso similar al caso anterior.r
: Es el radio de la circunferencia.El lienzo es el área donde va a estar la circunferencia. La definiremos con unas dimensiones de
140x140
.El lienzo la definiremos de la siguiente forma:
Los dos primeros define la posición del lienzo y los dos últimos definen sus dimensiones.
Por ejemplo:
Y las dos (02) circunferencias las definiremos así:
Como las circunferencias anteriores no tienen bordes, entonces, su radio será igual a la mitad del ancho de su lienzo. Pero, si las circunferencias tienen un borde de
10px
, es decir,stroke-width: 10
su radio se calculará de la siguiente manera:Por lo tanto, la circunferencia quedaría definida así:
Asumiendo que a la segunda circunferencia le hemos puesto el borde antes mencionado. La idea es evitar que por la definición de su borde se vea como si estuviese cortada, es decir, fuera del lienzo.
Teniendo claro cómo hacer una circunferencia con su trazo, definamos la primera animación en el siguiente fragmento de código:
Ahora, que ya sabemos cómo hacer una animación de carga vamos a definirla con su borde degradado, pero antes, vamos a explicar cómo se obtiene el degradado. Para ello, vamos a utilizar la etiqueta
<linearGradient>
. En ella va a estar contenida dos (02) etiquetas<stop />
en las que se definirán los colores que formarán el degradado.Por ejemplo:
En el parámetro
id
del elementolinearGradient
definiremos el identificador en el que haremos referencia desde una regla CSS al color degradado que hemos definido, en este caso, para aplicarla al trazo (stroke
). Por ejemplo, siid
está definida comogradiente
(id="gradiente
) le definiremos al trazo (stroke
) dicha gradiente de la siguiente forma:Explicando el resto de los parámetros:
En el atributo
gradientTransform
se definió la rotación de la gradiente definida anteriormente. En el parámetrostop-color
de los elementosstop
se definen los colores que serán parte de la gradiente formada.En la documentación oficial de Mozilla en inglés y traducida al español, el atributo
offset
se define, cito:Por lo tanto, para lograr el degradado deseado se establecieron los valores
0%
y30%
al atributooffset
de los elementosstop
.Entrega del código fuente de la animación:
Ahora ya sabemos cómo hacer una animación con un trazo (
stroke
) degradado, por lo tanto, les compartiré el siguiente fragmento de código de las animaciones.Code snippet: