Loader de Pontos em Onda

Visualização

Três variações de tamanho são exibidas em um fundo escuro.

Casos de uso e recursos

• Exibição de carregamento/processamento: Usado para notificar o usuário sobre a espera ao fazer uma solicitação de API, buscar dados, etc.

• Você pode alterar livremente o número de pontos: Basta adicionar/excluir o elemento div.dot no HTML.

• CSS puro: Não é necessário JavaScript. Pode ser incorporado diretamente nos elementos de exibição.

• Acessibilidade: Compatível com leitor de tela adicionando aria-label="Loading" e role="status".

Pontos de design e UX

1. Atraso de 0,16 segundos para cada ponto: Este atraso cria um ritmo visual ondulante.

2. Curva ease-in-out: Cada ponto parece ter um salto elástico.

3. opacity fade: Um efeito visual de luz dançante, reduzindo a opacidade à medida que ela aumenta.

Como personalizar

Variações de tamanho (SM / MD / LG)

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

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

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

Alterando a velocidade da animação

/* Mais rápido */

.dot { animation-duration: 0.8s; }



/* Tarde */

.dot { animation-duration: 2s; }

Cor personalizada

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

Código de implementação

<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>

Status de compatibilidade do navegador

| Navegador | Estado de compatibilidade |

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

| Cromo 43+ | ✅ Totalmente compatível |

| Firefox 16+ | ✅ Totalmente compatível |

| Safári 9+ | ✅ Totalmente compatível |

| Borda 79+ | ✅ Totalmente compatível |