Plantilla de CSS para Loading Spinner: círculos y barras giratorias animadas
📝 Uso
Esta plantilla se usa para crear un spinner de carga, como una animación de círculo o barra giratoria.
GIF de demostración
📘 Explicación
Este código usa `@keyframes` para crear un círculo giratorio (`spinner-circle`) y una barra deslizante (`spinner-bar`). Puedes ajustar la velocidad y el color de la animación según lo necesites.
🔹 Código Parcial
<style>
/* Círculo Giratorio */
.spinner-circle {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
/* Barra Giratoria */
.spinner-bar {
width: 50px;
height: 5px;
background-color: #3498db;
animation: bar 1s infinite alternate;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bar {
0% { width: 0; }
50% { width: 50px; }
100% { width: 0; }
}
</style>
💻 Código Completo
<div class="spinner-circle"></div>
<div class="spinner-bar"></div>
<style>
/* Círculo Giratorio */
.spinner-circle {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
/* Barra Giratoria */
.spinner-bar {
width: 50px;
height: 5px;
background-color: #3498db;
animation: bar 1s infinite alternate;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bar {
0% { width: 0; }
50% { width: 50px; }
100% { width: 0; }
}
</style>
🌀 Técnicas prácticas para el uso de indicadores de carga
Los indicadores de carga creados con animaciones CSS son elementos UI importantes que ayudan a los usuarios a sobrellevar los tiempos de espera de manera cómoda. Una personalización adecuada permite crear efectos que se ajusten a la imagen de tu marca.
🎨 Personalización del diseño
Partiendo de la animación básica de rotación, cambiar el border-top-color a un degradado da una impresión moderna. Además, añadir animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1) crea un movimiento más natural. El color puede cambiarse no solo desde #3498db (azul), sino también para coincidir con los colores temáticos del sitio.
⏱️ Optimización del rendimiento
Para mantener animaciones suaves, se recomienda añadir la propiedad will-change: transform. Al mostrar varios indicadores, escalonar el animation-delay crea un efecto visualmente más rico.
📱 Diseño responsivo
En dispositivos móviles, reducir el tamaño (width: 30px) y acortar la duración de la animación (animation-duration: 1s) permite una visualización compacta y eficiente. Para fondos con tema oscuro, ajusta el border-color a un color más claro.
Los indicadores de carga son importantes para mejorar la experiencia del usuario, pero se debe evitar complicarlos demasiado o que se muestren por mucho tiempo. Busca diseños simples, claros y que se ajusten a la atmósfera general de tu sitio.