En este tutorial te mostraré como crear un “loading button” o botón con ícono animado utilizando CSS3.
Voy a asumir que sabes agregar un ícono dentro de un elemento HTML, así que vamos a emplear los font icons del sitio Fontawesome.
Lo primero será vincular nuestro documento HTML con la CDN de Fontawesome. Para esto, copia el siguiente código y pégalo como contenido de la cabecera o elemento <head> de tu página web.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">Luego, dentro dentro del <body> escribimos el siguiente código HTML para agregar nuestro botón y el font icon del sitio Fontawesome.
<button class="botonCarga"><i class="fas fa-circle-notch"></i>Cargando...</button>A continuación, vamos a aplicar los estilos CSS. Primero creamos una regla para cambiar los estilos del botón, esto es, agregarle un color de fondo, un espaciado interno, eliminar los bordes, cambiar el color del texto y modificar la forma del puntero del ratón.
.botonCarga {
background-color: #008000;
border: none;
color: #ccc;
padding: 15px 30px;
font-size: 1rem;
text-align: center;
cursor:pointer
}
Creamos otra regla para añadir un margen derecho y un tamaño de fuente a nuestro ícono.
/* Agregar un margen derecho y un tamaño de fuente al font icon */
.fas {
margin-right: 5px;
font-size: 0.9rem
}
Por último, vamos a aplicar el efecto de animación para que nuestro ícono rote sobre si mismo de manera continua. Para esto, utilizamos la propiedad de atajo animation y la regla @keyframes para crear la secuencia de la animación.
/* Animar ícono */
i {
animation: spinner 1.5s linear infinite;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Y aquí tenemos el código completo.
See the Pen Crear un botón con ícono de carga animado 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
