Categoría · Animaciones de Carga Nivel de Dificultad · Principiante Publicado el · 15 de enero de 2024
Spinner de Carga Animado
Un hermoso spinner de carga solo con CSS con animación de rotación suave
#css #animation #upload #spinner
Diseño Responsivo
Sí
Soporte para Modo Oscuro
No
líneas
51
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Spinner de Carga Animado
Un spinner de carga limpio y moderno construido con CSS puro. Este componente presenta una animación de rotación suave y un efecto de texto pulsante que proporciona excelente retroalimentación al usuario durante los estados de carga.
Características
- Animación CSS Pura: No requiere JavaScript para la animación
- Colores Personalizables: Fácil de modificar los colores para que coincidan con tu marca
- Diseño Responsivo: Funciona bien en todos los tamaños de pantalla
- Rendimiento Suave: Utiliza transformaciones CSS para un rendimiento óptimo
- Amigable con Accesibilidad: Incluye texto apropiado para lectores de pantalla
Uso
Este spinner es perfecto para:
- Estados de carga de página
- Envíos de formularios
- Operaciones de obtención de datos
- Cargas de archivos
- Cualquier operación asíncrona
Personalización
Puedes personalizar fácilmente el spinner modificando:
- Color de
border-toppara el color del spinner widthyheightpara el tamaño del spinnerdurationde la animación para la velocidad- Contenido y estilo de
loading-text
Soporte de Navegadores
Este componente funciona en todos los navegadores modernos que soportan animaciones CSS y transformaciones (IE10+).
HTML
4
líneas
CSS
35
líneas
JavaScript
12
líneas
<div class="spinner-container">
<div class="spinner"></div>
<p class="loading-text">Cargando...</p>
</div>