Aprender a crear un preloader con CSS.
Cómo crear un cargador
Paso 1) Añadir HTML:
Ejemplo
<div class="loader"></div>Paso 2) Añadir 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); }
} Inténtalo tú mismo " ejemplo Explicación
La border propiedad especifica el tamaño del borde y el color del borde de la cargadora. La border-radius propiedad transforma el cargador en un círculo.
La cosa azul que gira por el interior de la frontera se especifica con el border-top propiedad. También puede incluir border-bottom , border-left y / o border-right si quieres más "spinners" (see example below) .
El tamaño de la cargadora se especifica con la width y height propiedades.
Por último, añadimos una animation que hace que la cosa azul giro siempre con una segunda velocidad 2 animación.
Nota: También debe incluir prefijos y -webkit- -MS- para los navegadores que no admitan la animación y propiedades de transformación. Haga clic en el ejemplo para ver cómo.
Añadir más hiladores
Ejemplo
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
} Inténtalo tú mismo " Ejemplo
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
} Inténtalo tú mismo " Ejemplo
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
} Inténtalo tú mismo " Otro ejemplo
Un ejemplo de cómo colocar el cargador en el medio de la página y mostrar "page content" cuando la carga está completa: