Cómo Crear Un Cargador De Solo CSS Usando Un Elemento

Si tiene un sitio web, es útil tener un cargador para que los usuarios puedan saber que algo está sucediendo una vez que hayan hecho clic en un enlace o botón.

Puede usar este componente del cargador en muchos lugares y debería ser lo más simple posible.

En esta publicación, veremos cómo construir dos tipos de cargadores con solo una <div>y unas pocas líneas de código CSS. No solo esto, sino que los haremos personalizables para que pueda crear fácilmente diferentes variaciones del mismo código.

Esto es lo que construiremos:

Spinner y Progress Loader solo para CSS

Spinner y Progress Loader solo para CSS

Cómo crear un cargador giratorio

A continuación se muestra una demostración de lo que estamos construyendo:

https://codepen.io/t_afif/pen/PoJyaNy

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 
 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Tenemos 4 cargadores diferentes usando el mismo código. Con solo cambiar algunas variables, podemos generar un nuevo cargador sin necesidad de tocar el código CSS.

Las variables se definen como sigue:

  • --b define el grosor del borde.
  • --n  define el número de guiones.
  • --gdefine el espacio entre guiones. Como estamos tratando con un elemento circular, este es un valor de ángulo.
  • --c define el color.

Aquí hay una ilustración para ver las diferentes variables.

Variables CSS del cargador Spinner

Variables CSS del cargador Spinner

Abordemos el código CSS. Usaremos otra figura para ilustrar una construcción paso a paso del cargador.

Ilustración paso a paso del cargador giratorio

Ilustración paso a paso del cargador giratorio

Primero comenzamos creando un círculo como este:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

Nada complejo hasta ahora. Tenga en cuenta que su uso aspect-rationos permite modificar solo un valor (el width) para controlar el tamaño.

Luego agregamos una coloración de degradado cónico de transparente al color definido (la variable --c):

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

En este paso, introducimos la maskpropiedad para ocultar algunas partes del círculo de forma repetitiva. Esto dependerá de las variables --ny . --dSi observa detenidamente la figura, notaremos el siguiente patrón:

visible part
invisible part
visible part
invisible part
etc

Para hacer esto, usamos repeating-conic-gradient(#000 0 X, #0000 0 Y). De 0a Xtenemos un color opaco (parte visible) y de Xa Ytenemos uno transparente (parte invisible).

Introducimos nuestras variables:

  • Necesitamos un espacio igual a gentre cada parte visible por lo que la fórmula entre Xy Yserá X = Y - g.
  • Necesitamos nla parte visible, por lo que la fórmula de Ydebería ser Y = 360deg/n. Un círculo completo es 360degasí que simplemente lo dividimos porn

Nuestro código hasta ahora es:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

El siguiente paso es el más complicado, porque necesitamos aplicar otra máscara para crear una especie de agujero para obtener la forma final. Para ello usaremos lógicamente a radial-gradient()con nuestra variable b:

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

Un círculo completo del que quitamos un espesor igual a b.

Añadimos esto a la máscara anterior:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

Tenemos dos capas de máscara, pero el resultado no es el que queremos. Obtenemos lo siguiente:

Puede parecer extraño pero es lógico. La parte visible "final" no es más que la suma de cada parte visible de cada capa de máscara. Podemos cambiar este comportamiento usando mask-composite. Necesitaría un artículo completo para explicar esta propiedad, así que simplemente daré el valor.

En nuestro caso, debemos considerar intersect(y destination-outpara la propiedad prefijada). Nuestro código se convertirá en:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

¡Hemos terminado con la forma! Solo nos falta la animación. Esta última es una rotación infinita.

Lo único a tener en cuenta es que estoy usando una stepsanimación para crear la ilusión de guiones fijos y colores en movimiento.

Aquí hay una ilustración para ver la diferencia.

Una animación lineal frente a una animación de pasos

La primera es una rotación lineal y continua de la forma (no la que queremos) y la segunda es una animación discreta (la que queremos).

Aquí está el código completo, incluida la animación:

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 
 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Notarás algunas diferencias con el código que usé en la explicación:

  • Estoy agregando padding: 1pxy configurando el fondo paracontent-box
  • Hay +/1degentre los colores de larepeating-conic-gradient()
  • Hay algunos porcentajes de diferencia entre el color dentro del radial-gradient()

Esas son algunas correcciones para evitar fallas visuales. Se sabe que los degradados producen resultados "extraños" en algunos casos, por lo que debemos ajustar algunos valores manualmente para evitarlos.

Cómo crear un cargador de progreso

Al igual que el cargador anterior, comencemos con una descripción general:

https://codepen.io/t_afif/pen/bGoNddg

 <div class="loader"></div>
 <div class="loader" style="--s:10px;--n:10;color:red"></div>
 <div class="loader" style="--g:0px;color:darkblue"></div>
 <div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>
 .loader {
   --n:5;    /* control the number of stripes */
   --s:30px; /* control the width of stripes */
   --g:5px;  /* control the gap between stripes */

   width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

Tenemos la misma configuración que el cargador anterior. Variables CSS que controlan el cargador:

  • --n define el número de guiones/rayas.
  • --s define el ancho de cada franja.
  • --g define el espacio entre las rayas.

Ilustración de las variables CSS

Ilustración de las variables CSS

De la figura anterior podemos ver que el ancho del elemento dependerá de las 3 variables. El CSS será el siguiente:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

Usamos paddingpara establecer el espacio en cada lado. Entonces el ancho será igual al número de rayas multiplicado por su ancho y el espacio. Eliminamos un espacio porque para Nlas rayas tenemos N-1espacios.

Para crear las rayas usaremos el siguiente degradado.

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

De 0a ses el color definido y de sa s + gun color transparente (la brecha).

Estoy usando currentColorcuál es el valor de la colorpropiedad. Tenga en cuenta que no definí ningún color dentro border, por lo que también se usará para el valor de color. Si queremos cambiar el color del cargador, solo necesitamos establecer la colorpropiedad.

Nuestro código hasta ahora:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

Estoy usando content-boxpara asegurarme de que el degradado no cubra el área de relleno. Luego defino un tamaño igual a 100% 100%y una posición izquierda.

Es hora de la animación. Para este cargador, animaremos el background-sizede 0% 100%a 100% 100%lo que significa el ancho de nuestro degradado de 0%  a100%

Al igual que el cargador anterior, confiaremos en steps()tener una animación discreta en lugar de una continua.

Una animación lineal frente a una animación de pasos

El segundo es el que queremos crear, y lo podemos lograr agregando el siguiente código:

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Si observa detenidamente la última figura, notará que la animación no está completa. Nos falta una raya al final, incluso si hemos usado N. Esto no es un error, sino cómo steps()se supone que funciona.

Para superar esto, necesitamos agregar un paso adicional. Aumentamos el background-sizede nuestro degradado para contener N+1rayas y usar steps(N+1). Esto nos llevará al código final:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Tenga en cuenta que el ancho del degradado es igual a N+1multiplicado por el ancho de una franja y un espacio (en lugar de ser 100%)

Conclusión

Espero que disfrutes este tutorial. Si está interesado, he creado más de 500 cargadores div únicos solo para CSS . También escribí otro tutorial para explicar cómo crear el cargador de puntos usando solo propiedades de fondo .

Encuentre a continuación enlaces útiles para obtener más detalles sobre algunas propiedades que he usado y que no expliqué a fondo debido a su complejidad:

¡Gracias por leer!

Enlace: https://www.freecodecamp.org/news/how-to-create-a-css-only-loader/

#css 

What is GEEK

Buddha Community

Cómo Crear Un Cargador De Solo CSS Usando Un Elemento

Cómo Crear Un Cargador De Solo CSS Usando Un Elemento

Si tiene un sitio web, es útil tener un cargador para que los usuarios puedan saber que algo está sucediendo una vez que hayan hecho clic en un enlace o botón.

Puede usar este componente del cargador en muchos lugares y debería ser lo más simple posible.

En esta publicación, veremos cómo construir dos tipos de cargadores con solo una <div>y unas pocas líneas de código CSS. No solo esto, sino que los haremos personalizables para que pueda crear fácilmente diferentes variaciones del mismo código.

Esto es lo que construiremos:

Spinner y Progress Loader solo para CSS

Spinner y Progress Loader solo para CSS

Cómo crear un cargador giratorio

A continuación se muestra una demostración de lo que estamos construyendo:

https://codepen.io/t_afif/pen/PoJyaNy

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 
 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Tenemos 4 cargadores diferentes usando el mismo código. Con solo cambiar algunas variables, podemos generar un nuevo cargador sin necesidad de tocar el código CSS.

Las variables se definen como sigue:

  • --b define el grosor del borde.
  • --n  define el número de guiones.
  • --gdefine el espacio entre guiones. Como estamos tratando con un elemento circular, este es un valor de ángulo.
  • --c define el color.

Aquí hay una ilustración para ver las diferentes variables.

Variables CSS del cargador Spinner

Variables CSS del cargador Spinner

Abordemos el código CSS. Usaremos otra figura para ilustrar una construcción paso a paso del cargador.

Ilustración paso a paso del cargador giratorio

Ilustración paso a paso del cargador giratorio

Primero comenzamos creando un círculo como este:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

Nada complejo hasta ahora. Tenga en cuenta que su uso aspect-rationos permite modificar solo un valor (el width) para controlar el tamaño.

Luego agregamos una coloración de degradado cónico de transparente al color definido (la variable --c):

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

En este paso, introducimos la maskpropiedad para ocultar algunas partes del círculo de forma repetitiva. Esto dependerá de las variables --ny . --dSi observa detenidamente la figura, notaremos el siguiente patrón:

visible part
invisible part
visible part
invisible part
etc

Para hacer esto, usamos repeating-conic-gradient(#000 0 X, #0000 0 Y). De 0a Xtenemos un color opaco (parte visible) y de Xa Ytenemos uno transparente (parte invisible).

Introducimos nuestras variables:

  • Necesitamos un espacio igual a gentre cada parte visible por lo que la fórmula entre Xy Yserá X = Y - g.
  • Necesitamos nla parte visible, por lo que la fórmula de Ydebería ser Y = 360deg/n. Un círculo completo es 360degasí que simplemente lo dividimos porn

Nuestro código hasta ahora es:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

El siguiente paso es el más complicado, porque necesitamos aplicar otra máscara para crear una especie de agujero para obtener la forma final. Para ello usaremos lógicamente a radial-gradient()con nuestra variable b:

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

Un círculo completo del que quitamos un espesor igual a b.

Añadimos esto a la máscara anterior:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

Tenemos dos capas de máscara, pero el resultado no es el que queremos. Obtenemos lo siguiente:

Puede parecer extraño pero es lógico. La parte visible "final" no es más que la suma de cada parte visible de cada capa de máscara. Podemos cambiar este comportamiento usando mask-composite. Necesitaría un artículo completo para explicar esta propiedad, así que simplemente daré el valor.

En nuestro caso, debemos considerar intersect(y destination-outpara la propiedad prefijada). Nuestro código se convertirá en:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

¡Hemos terminado con la forma! Solo nos falta la animación. Esta última es una rotación infinita.

Lo único a tener en cuenta es que estoy usando una stepsanimación para crear la ilusión de guiones fijos y colores en movimiento.

Aquí hay una ilustración para ver la diferencia.

Una animación lineal frente a una animación de pasos

La primera es una rotación lineal y continua de la forma (no la que queremos) y la segunda es una animación discreta (la que queremos).

Aquí está el código completo, incluida la animación:

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 
 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Notarás algunas diferencias con el código que usé en la explicación:

  • Estoy agregando padding: 1pxy configurando el fondo paracontent-box
  • Hay +/1degentre los colores de larepeating-conic-gradient()
  • Hay algunos porcentajes de diferencia entre el color dentro del radial-gradient()

Esas son algunas correcciones para evitar fallas visuales. Se sabe que los degradados producen resultados "extraños" en algunos casos, por lo que debemos ajustar algunos valores manualmente para evitarlos.

Cómo crear un cargador de progreso

Al igual que el cargador anterior, comencemos con una descripción general:

https://codepen.io/t_afif/pen/bGoNddg

 <div class="loader"></div>
 <div class="loader" style="--s:10px;--n:10;color:red"></div>
 <div class="loader" style="--g:0px;color:darkblue"></div>
 <div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>
 .loader {
   --n:5;    /* control the number of stripes */
   --s:30px; /* control the width of stripes */
   --g:5px;  /* control the gap between stripes */

   width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

Tenemos la misma configuración que el cargador anterior. Variables CSS que controlan el cargador:

  • --n define el número de guiones/rayas.
  • --s define el ancho de cada franja.
  • --g define el espacio entre las rayas.

Ilustración de las variables CSS

Ilustración de las variables CSS

De la figura anterior podemos ver que el ancho del elemento dependerá de las 3 variables. El CSS será el siguiente:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

Usamos paddingpara establecer el espacio en cada lado. Entonces el ancho será igual al número de rayas multiplicado por su ancho y el espacio. Eliminamos un espacio porque para Nlas rayas tenemos N-1espacios.

Para crear las rayas usaremos el siguiente degradado.

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

De 0a ses el color definido y de sa s + gun color transparente (la brecha).

Estoy usando currentColorcuál es el valor de la colorpropiedad. Tenga en cuenta que no definí ningún color dentro border, por lo que también se usará para el valor de color. Si queremos cambiar el color del cargador, solo necesitamos establecer la colorpropiedad.

Nuestro código hasta ahora:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

Estoy usando content-boxpara asegurarme de que el degradado no cubra el área de relleno. Luego defino un tamaño igual a 100% 100%y una posición izquierda.

Es hora de la animación. Para este cargador, animaremos el background-sizede 0% 100%a 100% 100%lo que significa el ancho de nuestro degradado de 0%  a100%

Al igual que el cargador anterior, confiaremos en steps()tener una animación discreta en lugar de una continua.

Una animación lineal frente a una animación de pasos

El segundo es el que queremos crear, y lo podemos lograr agregando el siguiente código:

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Si observa detenidamente la última figura, notará que la animación no está completa. Nos falta una raya al final, incluso si hemos usado N. Esto no es un error, sino cómo steps()se supone que funciona.

Para superar esto, necesitamos agregar un paso adicional. Aumentamos el background-sizede nuestro degradado para contener N+1rayas y usar steps(N+1). Esto nos llevará al código final:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Tenga en cuenta que el ancho del degradado es igual a N+1multiplicado por el ancho de una franja y un espacio (en lugar de ser 100%)

Conclusión

Espero que disfrutes este tutorial. Si está interesado, he creado más de 500 cargadores div únicos solo para CSS . También escribí otro tutorial para explicar cómo crear el cargador de puntos usando solo propiedades de fondo .

Encuentre a continuación enlaces útiles para obtener más detalles sobre algunas propiedades que he usado y que no expliqué a fondo debido a su complejidad:

¡Gracias por leer!

Enlace: https://www.freecodecamp.org/news/how-to-create-a-css-only-loader/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background