Vamos a ver a continuación como puedes crear un Spinner Loading o Spinner loader utilizando solamente CSS y HTML (por supuesto).
Este efecto es útil si queremos añadirlo en procesos de carga, para indicar al usuario que se está procesando, así evitamos que el visitante se desespere.
Aquí te dejo un vídeo muy cortito #short donde lo explico.
Y a continuación te voy a dejo el código, por si lo quieres utilizar para tus proyectos.
Parte de HTML de Spinner Loader
La parte de HTML es muy breve, ya que solo utilizaremos un div con una clase para hacerlo.
<div class="spinner"></div>No hace falta que lo diga, pero por si acaso, puedes poner la clase que tu quieras.
Parte de CSS de Spinner Loader
Ahora vamos con la parte de CSS, muy facilita también.
Clase de spinner
.spinner{
border:20px solid #f2f2f2;
border-bottom: 20px solid #33dba9;
border-radius: 50%;
width: 150px;
height: 150px;
animation: loader 2s linear infinite;
} Keyframe efecto
@keyframes loader{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}De esta forma tan simple, obtenemos el efecto de carga giratorio o spinner. Espero que te haya gustado este pequeño truco para hacer este efecto tan chulo.
Si tienes cualquier duda ya sabes que me lo puedes dejar debajo en los comentarios, nos vemos en el siguiente!