Un spinner loader es un elemento animado que se utiliza mucho en el diseño web actual y sirve para indicar a los usuarios de un sitio web que que un contenido se está cargando.
Durante mucho tiempo los spinners se crearon utilizando imágenes tipo GIF, sin embargo CSS3 cuenta con propiedades como animation, transform y keyframes, con las que podemos crear cualquier tipo de spinner loader, desde el más básico hasta el más complejo.
Vamos a ver un ejemplo en el que vamos a crear un spinner loader que consiste en un círculo con un elemento girando alrededor del mismo.
Primero vamos a crear un elemento <div>:
<div class="spinner"></div>Luego aplicaremos algunos estilos con las siguientes reglas CSS:
.spinner {
border: 18px solid #ddd;
border-top: 18px solid #00ff00;
border-radius: 50%;
width: 130px;
height: 130px;
animation: loader 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Con la propiedad border definimos los bordes del elemento <div>. La propiedad border-radius permite transformar el elemento en un círculo. Las propiedades width y height establecen la anchura y altura, respectivamente, del círculo. La propiedad border-top define el elemento que girará alrededor del círculo.
Por último, aplicamos la animación mediante la propiedad animation.
Este es el resultado en el navegador:
See the Pen Untitled by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
