Cómo - Cargador CSS
Aprende a crear un precargador con CSS.
Cómo crear un cargador
Paso 1) Agregar HTML:
Ejemplo
<div class="loader"></div>
Paso 2) Agregar CSS:
Ejemplo
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Ejemplo explicado
La border
propiedad especifica el tamaño del borde y el color del borde del cargador. La border-radius
propiedad transforma el cargador en un círculo.
La cosa azul que gira dentro del borde se especifica con la
border-top
propiedad. También puede incluir border-bottom
, border-left
y/o
border-right
si desea más "spinners" (vea el ejemplo a continuación).
El tamaño del cargador se especifica con las propiedades width
y height
.
Por último, agregamos una animation
que hace que la cosa azul gire para siempre con una velocidad de animación de 2 segundos.
Nota: También debe incluir un prefijo -webkit- para navegadores que no admitan propiedades de animación y transformación. Haga clic en el ejemplo para ver cómo.
Añadir más hilanderos
Ejemplo
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Ejemplo
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Ejemplo
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Otro ejemplo
Un ejemplo de cómo colocar el cargador en el medio de la página y mostrar el "contenido de la página" cuando se completa la carga: