Animación de carga
Aclaratoria importante:
Por favor, leer los comentarios incrustados en el código fuente, ya que en ellos, se explican detalles que no se pueden expresar únicamente en los párrafos.
También, puede ir directamente al código fuente ubicado al final de esta publicación, probarlo e incorporarlo a su proyecto, pero se recomienda leer antes.
Trazos y combinación de tres (03) tipos de animaciones superpuestas
Para lograr el efecto deseado se manipularán los trazos (bordes) de la circunferencia. Para este caso, se utilizará SVG como formato principal. Si bien, utilizando solamente CSS y HTML se puede lograr un efecto similar no es exactamente lo que buscamos. Vamos a empezar primero con el caso HTML y luego SVG.
Caso HTML
Por ejemplo, para el caso HTML, vamos a definir dos (02) elementos. El primero contendrá al segundo elemento y el segundo contendrá cuatro (04) elementos más que serán las cuatro (04) circunferencias con un borde sólido transparente definido, mientras que uno de sus bordes tendrá un color visible.
Vamos a ilustrarlo con el siguiente fragmento de código documentado en sus comentarios. Se utilizó JavaScript para permitirle cambiar el tamaño, pero no se requiere para que la animación funcione:
// Capturamos las opciones:
let tamannos = document.querySelectorAll( "#sizes [type='radio']" );
// Obtenemos las reglas CSS:
let reglas = document.styleSheets[0].cssRules;
for ( let regla of reglas ) {
// De todas las reglas CSS, seleccionar el selector ":root".
if ( regla.selectorText === ":root" ) {
for ( let tamanno of tamannos ) {
tamanno.onclick = () => {
// Cambiar el valor a la variable «--diametro»:
regla.style.setProperty("--diametro", `${tamanno.value}`);
}
}
// Una vez obtenido, detener el bucle:
break;
}
}
:root {
--diametro: 40px;
/* Calcular el grosor del borde de la circunferencia
en función del diámetro de la circunferencia */
--border-width: calc(var(--diametro) * 0.075);
/* Fuente tipográfica predeterminada */
font-family: "Open Sans", sans-serif, arial;
}
*, *::before, *::after {
/* Evitar que el elemento cambie de tamaño
cuando se le defina un relleno o un borde */
box-sizing: border-box;
}
/* Propiedades comunes que se aplicarán
a la caja que girará constantemente,
al contenedor de las cuatro circunferencias
y a la circunferencia */
.giro-constante,
.contenedor-circunferencia,
.circunferencia {
width: var(--diametro);
height: var(--diametro);
border-radius: 50%;
/* Transición que no tiene nada que ver con la animación
de carga. Esta parte es para ilustrar */
transition: 300ms ease;
}
/* Propiedades comunes */
.giro-constante,
.contenedor-circunferencia {
position: relative;
}
.contenedor-circunferencia {
animation: 2s ease giro-intervalo infinite;
}
.giro-constante {
animation: 2s linear giro-constante infinite;
}
/* Centraremos el texto */
.giro-constante {
display: flex;
justify-content: center;
align-items: center;
}
/* Definición del borde de las circunferencias */
.circunferencia {
position: absolute;
border: var(--border-width) solid transparent;
animation: 2s ease giro-alternado infinite;
}
/*
Se diferenciará por colores el borde izquierdo
de las circunferencias para facilitar la ilustración
de la animación en cuanto a su composición */
.circunferencia:first-of-type {
border: var(--border-width) solid #c39fde;
border-left-color: #0080d4;
/* Sin rotación */
transform: rotateZ( 0deg );
}
.circunferencia:nth-of-type(2) {
border-left-color: blue;
/* 90 grados sentido horario */
transform: rotateZ( -90deg );
}
.circunferencia:nth-of-type(3) {
border-left-color: #f06600;
/* 180 grados sentido horario */
transform: rotateZ( -180deg );
}
.circunferencia:last-of-type {
border-left-color: #008000;
/* 270 grados sentido horario */
transform: rotateZ( -270deg );
}
@keyframes giro-alternado {
50% {
/* Sentido horario */
transform: rotateZ( -359deg );
}
}
@keyframes giro-intervalo {
0% {
transform: rotateZ( -359deg );
}
50%, 100% {
transform: rotateZ( 0deg );
}
}
@keyframes giro-constante {
from {
transform: rotateZ( -359deg );
}
}
/* Estilos que no tienen que ver con la animación
de carga de la aplicación. Se utilizará con JavaScript
para ilustrar */
.sizes {
padding: 10px;
margin-bottom: 20px;
border: 1px solid #0080d4;
width: max-content;
}
.sizes label {
display: inline-flex;
align-items: center;
padding: 0 10px;
}
<!-- Herramienta de ilustración -->
<h4>Seleccione un tamaño</h4>
<div class="sizes" id="sizes">
<label><input type="radio" name="sizes" value="40px" checked=""> 40px</label>
<label><input type="radio" name="sizes" value="60px"> 60px</label>
<label><input type="radio" name="sizes" value="80px"> 80px</label>
</div>
<!-- Animación de carga de tipo bootloader -->
<div class="giro-constante" id="giroConstante">
<div class="contenedor-circunferencia" id="contenedorCircunferencia">
<div class="circunferencia"></div>
<div class="circunferencia"></div>
<div class="circunferencia"></div>
<div class="circunferencia"></div>
</div>
</div>
Se pudo observar que se logra conseguir un resultado aproximado, pero no exactamente lo que se desea. En cada circunferencia se establece un color de borde diferente para distinguirlas entre sí.
Nota: los colores que se colocan en cada borde cumple con el objetivo de facilitar la comprensión de la animación en su versión HTML
Se requiere la combinación de tres (03) animaciones superpuestas entre sí para conseguir el efecto observado.
Para entender un poco mejor el escenario, vamos a separar las animaciones en el siguiente fragmento de código:
:root {
--diametro: 80px;
/* Calcular el grosor del borde de la circunferencia
en función del diámetro de la circunferencia */
--border-width: calc(var(--diametro) * 0.075);
/* Fuente tipográfica predeterminada */
font-family: "Open Sans", sans-serif, arial;
}
*, *::before, *::after {
/* Evitar que el elemento cambie de tamaño
cuando se le defina un relleno o un borde */
box-sizing: border-box;
}
body {
max-width: 780px;
margin: 0 auto;
padding: 10px;
}
hr {
margin: 20px auto;
border: 0;
border-bottom: 1px solid;
}
/* Propiedades comunes */
.giro-constante,
.contenedor-circunferencia,
.circunferencia,
.giro-intervalo {
width: var(--diametro);
height: var(--diametro);
border-radius: 50%;
}
/* Propiedades comunes */
.giro-constante,
.contenedor-circunferencia {
position: relative;
}
/* Se establece un borde para marcarlo */
.giro-constante.marcas,
.giro-intervalo.marcas{
border: 1px solid;
}
/* Centraremos el texto */
.giro-constante {
display: flex;
justify-content: center;
align-items: center;
}
/* Definición del borde de las circunferencias */
.circunferencia {
position: absolute;
border: var(--border-width) solid transparent;
}
/*
Se diferenciará por colores el borde izquierdo
de las circunferencias para facilitar la ilustración
de la animación en cuanto a su composición */
.circunferencia:first-of-type {
border: var(--border-width) solid #c39fde;
border-left-color: #0080d4;
/* Sin rotación */
transform: rotateZ( 0deg );
}
.circunferencia:nth-of-type(2) {
border-left-color: blue;
/* 90 grados sentido horario */
transform: rotateZ( -90deg );
}
.circunferencia:nth-of-type(3) {
border-left-color: #f06600;
/* 180 grados sentido horario */
transform: rotateZ( -180deg );
}
.circunferencia:last-of-type {
border-left-color: #008000;
/* 270 grados sentido horario */
transform: rotateZ( -270deg );
}
/* Marcas para observar las animaciones*/
.marcas::before,
.marcas::after {
content: "";
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0; bottom: 0;
}
.marcas::before {
height: 4px;
width: 40px;
background-color: #0080d4;
}
.marcas::after {
height: 40px;
width: 4px;
background-color: #f06600;
}
.giro-alternado {
animation: 2s ease giro-alternado infinite;
}
.giro-intervalo {
animation: 2s ease giro-intervalo infinite;
}
.giro-constante {
animation: 2s linear giro-constante infinite;
}
/* Animaciones de carga */
@keyframes giro-alternado {
50% {
/* Sentido horario */
transform: rotateZ( -359deg );
}
}
@keyframes giro-intervalo {
0% {
transform: rotateZ( -359deg );
}
50%, 100% {
transform: rotateZ( 0deg );
}
}
@keyframes giro-constante {
from {
transform: rotateZ( -359deg );
}
}
.animaciones {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 3rem;
margin: 10px auto;
}
.animaciones > div {
/* Evitar que las circunferencias se
deformen si no hay espacio disponible */
flex-shrink: 0;
}
<h3>Superposición de animaciones</h3>
<p>Observe cada una de las animaciones. En ellas se agregaron marcas en forma de cruz a cada circunferencia para facilitar la compresión de cómo funciona.</p>
<hr>
<div class="animaciones">
<div class="contenedor-circunferencia marcas" id="contenedorCircunferencia">
<div class="circunferencia giro-alternado"></div>
<div class="circunferencia giro-alternado"></div>
<div class="circunferencia giro-alternado"></div>
<div class="circunferencia giro-alternado"></div>
</div>
<span>+</span>
<div class="giro-intervalo marcas"></div>
<span>+</span>
<!-- Animación de carga de tipo bootloader -->
<div class="giro-constante marcas" id="giroConstante"></div>
<span>=</span>
<div class="giro-constante">
<div class="contenedor-circunferencia giro-intervalo" id="contenedorCircunferencia">
<div class="circunferencia giro-alternado"></div>
<div class="circunferencia giro-alternado"></div>
<div class="circunferencia giro-alternado"></div>
<div class="circunferencia giro-alternado"></div>
</div>
</div>
</div>
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:
/* Esta representa la animación de las
circunferencias que tienen los bordes de colores */
.giro-alternado {
animation: 2s ease giro-alternado infinite;
}
/* Esta reproduce una animación de giro completo por cada
animación de «giro-alternado» de las circunferencias
con bordes de colores */
.giro-intervalo {
animation: 2s ease giro-intervalo infinite;
}
/* Esta es una animación de giro constante. En él se
encuentran contenidos todos los elementos animados */
.giro-constante {
animation: 2s linear giro-constante infinite;
}
/* Produce una rotación de 359 grados en sentido
antihorario y luego regresa */
@keyframes giro-alternado {
50% {
/* Sentido horario */
transform: rotateZ( -359deg );
}
}
/* Produce una rotación de 359 grados en sentido
horario cada dos ciclos. Es decir, si la animación
dura dos segundos, entonces cada dos (02) segundos,
se produce un giro de 359 grados que dura un segundo */
@keyframes giro-intervalo {
0% {
transform: rotateZ( -359deg );
}
50%, 100% {
transform: rotateZ( 0deg );
}
}
/* Se utilizará para una rotación constante */
@keyframes giro-constante {
from {
transform: rotateZ( -359deg );
}
}
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.
Antes de empezar, primero tenemos que conocer cada parámetro y cada propiedad CSS que vamos a utilizar para reproducir la animación.
Propiedades CSS aplicadas a SVG:
stroke
: Esta propiedad significa literalmente trazo. Es decir, representa la línea o borde que se representará visualmente, en este caso, la circunferencia.
stroke-width
: En ella se define el grosor del trazo.
stroke-dasharray
: Forma una matriz de guiones. En ella definiremos el largo de los guiones del trazo. Por ejemplo, si la definimos como stroke-dasharray: 100
entonces, los guiones tendrán un largo de 100px
con espacios iguales entre sí de 100px
. Por lo tanto, para el caso de nuestra circunferencia, si queremos tener un guión igual a su longitud debemos utilizar la fórmula matemática: 2πr
, es decir, se multiplica el radio de la circunferencia por π
que vale aproximadamente 3.141592...
por 2.
stroke-dashoffset
: En ella desplazaremos los guiones formados por stroke-dasharray
a lo largo de la ruta del trazo.
fill
: En ella definimos el color de relleno de la figura. En este caso, nuestra circunferencia.
Parámetros SVG (caso de la circunferencia):
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 de 140 x 140
para centrar la circunferencia horizontalmente se debe definir cx=70
, donde 70
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:
<svg viewBox="0 0 140 140">
<!-- Dibujo SVG -->
</svg>
Los dos primeros define la posición del lienzo y los dos últimos definen sus dimensiones.
Por ejemplo:
viewBox = <min-x> <min-y> <anchura> <altura>
Y las dos (02) circunferencias las definiremos así:
<svg viewBox="0 0 140 140">
<circle cx="70" cy="70" r="70" />
<circle cx="70" cy="70" r="70" />
</svg>
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:
// A su radio conocido se le resta la mitad de su borde:
r = 70 - (ancho-border / 2):
// Dando el siguiente resultado:
r = 70 - 10 / 2 = 70 - 5 = 65
Por lo tanto, la circunferencia quedaría definida así:
<svg viewBox="0 0 140 140">
<circle cx="70" cy="70" r="70" />
<circle cx="70" cy="70" r="65" />
</svg>
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:
:root {
/* Diámetro del lienzo y caja contenedora de
de la circunferencia animada. Cambiar su tamaño
cambia el de la circunferencia también, pero en forma
de escala */
--diametro: 70px;
}
/* El lienzo y su caja contenedora tienen las mismas proporciones */
.lienzo,
.caja{
height: var(--diametro);
width: var(--diametro);
/* Redondeo de las esquinas */
border-radius: 50%;
}
.lienzo {
/* Rotación en sentido antihorario del lienzo */
transform: rotateZ( -90deg );
}
.cir {
fill: none;
}
.cir--fija {
stroke-width: 5;
stroke: #c39fde;
}
.cir--completando {
/* Grosor y color de línea*/
stroke-width: 10;
stroke: #2873fe;
/* Matriz de guiones */
stroke-dasharray: 440;
/* Desplazamiento de guiones */
stroke-dashoffset: 32.5;
}
/* Clases con las animaciones definidas */
.giro-intervalo {
animation: 2s ease giro-intervalo infinite;
}
/* Animación del trazo de la circunferencia */
.giro-trazo {
animation: 2s ease giro-trazo infinite;
}
/* Completa un giro de 360 grados cada dos (02) segudos */
.giro-constante {
animation: 2s linear giro-constante infinite;
}
/* Definición de las animaciones utilizadas en las clases anteriores */
/* Completa un giro de 360 grados cada
dos (02) segundos con una duración de
un (01) segundo */
@keyframes giro-intervalo {
0% {
transform: rotateZ( -449deg );
}
50%, 100% {
transform: rotateZ( -90deg );
}
}
/* Define el desplazamiento de los guiones (-)
del trazo de la circunferencia en un período
de dos (02) segundos */
@keyframes giro-trazo {
50% {
stroke-dashoffset: 440;
}
}
/* Giro constante de la caja contenedora de
la circunferencia animada */
@keyframes giro-constante {
from {
transform: rotateZ( -359deg );
}
}
/* IMPORTANTE
A partir de aquí, las reglas CSS que se definan,
no formarán parte de la animación. El objetivo de las siguientes reglas CSS es ilustrar cómo se componen
la animación de carga */
body {
margin: 0 auto;
max-width: 780px;
padding: 5px;
font-family: "Open Sans", sans-serif, arial;
}
.marcas.caja {
position: relative;
}
.marcas::before,
.marcas::after {
content: "";
display: block;
position: absolute;
margin: auto;
left: 0; right: 0;
top: 0; bottom: 0;
}
.marcas::before {
height: 2px;
width: 30px;
background-color: #f06600;
}
.marcas::after {
height: 30px;
width: 2px;
background-color: #0080d4;
}
.flex {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 450px;
font-size: 3rem;
color: #808080;
}
.flex > div {
flex-shrink: 0;
}
<h3>Esta circunferencia tiene tres animaciones.</h3>
<hr>
<!-- Esta es la primera animación, sin desglose -->
<div class="caja giro-constante">
<svg viewBox="0 0 140 140" class="lienzo giro-intervalo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>
<!-- A partir de aquí tenemos una animación desglosada -->
<p>Por lo tanto, si las desglosamos tenemos el siguiente resultado con las animaciones superpuestas:</p>
<div class="flex">
<div class="caja">
<svg viewBox="0 0 140 140" class="lienzo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>
<span>+</span>
<div class="caja marcas giro-intervalo">
<svg viewBox="0 0 140 140" class="lienzo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
</svg>
</div>
<span>+</span>
<div class="caja marcas giro-constante">
<svg viewBox="0 0 140 140" class="lienzo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
</svg>
</div>
<span>=</span>
<div class="caja giro-constante">
<svg viewBox="0 0 140 140" class="lienzo giro-intervalo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>
</div>
<p>Si solamente combinamos las dos (02) primeras animaciones tendremos el siguiente resultado:</p>
<div class="flex">
<div class="caja">
<svg viewBox="0 0 140 140" class="lienzo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>
<span>+</span>
<div class="caja marcas giro-intervalo">
<svg viewBox="0 0 140 140" class="lienzo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
</svg>
</div>
<span>=</span>
<div class="caja">
<svg viewBox="0 0 140 140" class="lienzo giro-intervalo">
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fija" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>
</div>
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:
<linearGradient id="gradiente" gradientTransform="rotate(319)">
<stop stop-color="#2873fe" offset="0%" />
<stop stop-color="#9e48c9" offset="30%" />
</linearGradient>
En el parámetro id
del elemento linearGradient
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, si id
está definida como gradiente
(id="gradiente
) le definiremos al trazo (stroke
) dicha gradiente de la siguiente forma:
.cir--completando {
stroke: url(#gradiente);
}
Explicando el resto de los parámetros:
En el atributo gradientTransform
se definió la rotación de la gradiente definida anteriormente. En el parámetro stop-color
de los elementos stop
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:
Este atributo define dónde se coloca la parada de gradiente a lo largo del vector de gradiente.
Por lo tanto, para lograr el degradado deseado se establecieron los valores 0%
y 30%
al atributo offset
de los elementos stop
.
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.
Fragmento de código:
:root {
--diametro: 100px;
}
/* Propiedades comunes del lienzo y la caja */
.lienzo,
.caja {
width: var(--diametro);
height: var(--diametro);
}
/* Lienzo donde se ubica la circunferencia */
.lienzo {
transform: rotateZ( -90deg );
}
/* Circunferencia */
.cir {
fill: none;
}
/* Circunferencia con el borde fijo */
.cir--fijo {
stroke: #c39fde;
stroke-width: 5;
}
/* Circunferencia con el borde animado */
.cir--completando {
stroke: url(#gradiente);
stroke-width: 10;
/* Matriz de guiones */
stroke-dasharray: 440;
stroke-dashoffset: 32;
}
/* Animación del trazo (stroke) */
.giro-trazo {
animation: 2s ease giro-trazo infinite;
}
/* Animación de giro en intervalos de dos (02) segundos */
.giro-intervalo {
animation: 2s ease giro-intervalo infinite;
}
/* Animación de giro constante*/
.giro-constante {
animation: 2s linear giro-constante infinite;
}
/* Definición de animaciones utilizadas
en las clases anteriores */
/* Desplazamiento de los guiones del trazo
de la circunferencia */
@keyframes giro-trazo {
50% {
stroke-dashoffset: 440;
}
}
/* Giro en intervalo. Se aplicará en el lienzo */
@keyframes giro-intervalo {
0% {
transform: rotateZ( -449deg );
}
50%, 100% {
transform: rotateZ( -90deg );
}
}
/* Animación para giro constante de 360 grados */
@keyframes giro-constante {
from {
transform: rotateZ( -359deg );
}
}
body {
font-family: "Open Sans", sans-serif, arial;
margin: 0 auto;
max-width: 780px;
padding: 5px;
}
/* Temporal */
.flex, label {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
<h4>Dos (02) tipos de animaciones</h4>
<p>Puede definir la animación sin el giro constante. Quedaría así:</p>
<!-- Animación sin el giro constante -->
<div class="caja">
<svg viewBox="0 0 140 140" class="lienzo giro-intervalo">
<!-- Degradado de colores -->
<linearGradient id="gradiente" gradientTransform="rotate(319)">
<stop stop-color="#2873fe" offset="0%" />
<stop stop-color="#9e48c9" offset="30%" />
</linearGradient>
<!-- Circunferencia con borde fijo -->
<circle class="cir cir--fijo" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>
<p>O con el giro constante, quedando así:</p>
<div class="caja giro-constante">
<svg viewBox="0 0 140 140" class="lienzo giro-intervalo">
<!-- Degradado de colores -->
<linearGradient id="gradiente" gradientTransform="rotate(319)">
<stop stop-color="#2873fe" offset="0%" />
<stop stop-color="#9e48c9" offset="30%" />
</linearGradient>
<!-- Circunferencia con borde fijo-->
<circle class="cir cir--fijo" cx="70" cy="70" r="65" />
<!-- Circunferencia con borde animado -->
<circle class="cir cir--completando giro-trazo" cx="70" cy="70" r="65" />
</svg>
</div>