Cómo crear: Cargador CSS

Aprende a crear un precargador usando CSS.

Prueba personal

Cómo crear un cargador

Primer paso - Añadir HTML：

<div class="loader"></div>

Segundo paso - Añadir CSS：

.loader {
  border: 16px solid #f3f3f3; /* gris claro */
  border-top: 16px solid #3498db; /* azul */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Prueba personal

Ejemplo de explicación:

border propiedad especifica el tamaño y el color del borde del cargador.border-radius propiedad convierte al cargador en circular.

La parte azul que gira dentro del borde se especifica por border-top propiedades especifican. Si desea más "giradores", también puede incluir border-bottom,border-left y/o border-right（ver el ejemplo siguiente）。

El tamaño del cargador se especifica por width y height propiedad especificada.

Finalmente, hemos añadido una animación que hace que la parte azul gire para siempre a una velocidad de animación de 2 segundos.

Nota:Para los que no admiten animation y transform El navegador de propiedades, también debe incluir una -webkit- prefijo. Haga clic en el ejemplo para ver cómo hacerlo.

Añadir más giradores

Ejemplo

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Prueba personal

Ejemplo

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Prueba personal

Ejemplo

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Prueba personal

Otro ejemplo

¿Cómo colocar el cargador en el centro de la página y mostrar "Contenido de la página" cuando se complete la carga?:

Ejemplo

Prueba personal