Loader de Onda de Puntos

Vista previa

Se muestran tres variaciones de tamaño sobre un fondo oscuro.

Casos de uso y características

• Pantalla de carga/procesamiento: Se utiliza para notificar al usuario que espera al realizar una solicitud de API, recuperar datos, etc.

• Puedes cambiar libremente el número de puntos: simplemente agrega/elimina el elemento div.dot en el HTML.

• CSS puro: no se requiere JavaScript. Se puede integrar directamente en elementos de visualización.

• Accesibilidad: Lector de pantalla compatible agregando aria-label="Loading" y role="status".

Puntos de diseño y UX

1. Retraso de 0,16 segundos para cada punto: este retraso crea un ritmo visual ondulante.

2. Curva de entrada y salida: Cada punto parece tener un rebote elástico.

3. opacidad desvanecida: Un efecto visual de baile de luz que reduce la opacidad a medida que aumenta.

Cómo personalizar

Variaciones de tamaño (SM / MD / LG)

.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

Cambiando la velocidad de la animación

/* Más rápido */

.dot { animation-duration: 0.8s; }



/* tarde */

.dot { animation-duration: 2s; }

Color personalizado

.dot { background: #f97316; } /* naranja */

Código de implementación

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad |

|--------|-------|

| Cromo 43+ | ✅ Totalmente compatible |

| Firefox 16+ | ✅ Totalmente compatible |

| Safari 9+ | ✅ Totalmente compatible |

| Borde 79+ | ✅ Totalmente compatible |