Loader de Anel Pulsante

Um componente carregador que usa um efeito de pulso com um lindo anel que se espalha como ondulações.

Visualização

Casos de uso e recursos

Este “Pulse Ring Loader” é particularmente eficaz nas seguintes situações.

Upload/download de arquivos: Ideal quando você deseja representar visualmente a “pulsação” dos dados enviados e recebidos.
Processamento de longo prazo, como análise de dados e geração de IA: Ao contrário da animação de rotação simples, expressões ricas com ondulações espalhadas reduzem o estresse enquanto os usuários esperam.
Seção Centro do Herói: Por se destacar como um elemento único, também funciona perfeitamente como um espaço reservado enquanto o conteúdo está sendo carregado.

Pontos de design e UX

Efeito sinérgico de gradação e sombra: Ao usar uma gradação vívida (índigo-roxo-rosa) na área central e adicionar luminescência de cor semelhante (sombra projetada), dá uma impressão moderna e premium.
Animação não linear (bézier cúbico): Usamos cubic-bezier\ para a velocidade com que o anel se espalha, criando uma ondulação natural que se espalha rapidamente no início e depois desaparece gradualmente.
Múltiplas ondulações devido ao atraso: Ao definir uma diferença de tempo (animation-delay\) entre vários anéis, criamos uma continuidade onde o movimento sempre continua.

Como personalizar

Mudança de cor: Você pode combinar a cor do tema alterando background: linear-gradient(...)\ de .pulse-core\ ou border-color\ de .pulse-ring\.
Tamanho e velocidade das ondulações: Ao aumentar o valor transform: scale(3.5)\ de @keyframes ring-pulse\, as ondulações se espalharão ainda mais, e alterando 2.5s\ de animation\, você pode ajustar a velocidade.
Condição de pulsação central: Ao alterar transform: scale(1.2)\ de @keyframes core-pulse\, você pode alterar a intensidade do batimento cardíaco no centro.

Código de implementação

<div class="pulse-loader-container">

<div class="pulse-ring"></div>

<div class="pulse-ring delay-1"></div>

<div class="pulse-ring delay-2"></div>

<div class="pulse-core"></div>

</div>



<style>
/* Colocação de contêineres em todo o carregador */

.pulse-loader-container {

position: relative;

width: 100px;

height: 100px;

display: flex;

align-items: center;

justify-content: center;

}



/* 中心のコア部分 */

.pulse-core {

width: 30px;

height: 30px;

background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);

border-radius: 50%;

position: absolute;

z-index: 10;

box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);

animation: core-pulse 2s infinite ease-in-out;

}



/* 波紋となるリング部分 */

.pulse-ring {

position: absolute;

width: 30px;

height: 30px;

border-radius: 50%;

border: 2px solid rgba(168, 85, 247, 0.8);

box-sizing: border-box;

animation: ring-pulse 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);

opacity: 0;

}



/* 波紋のディレイ（時間差） */

.delay-1 {

animation-delay: 0.8s;

}



.delay-2 {

animation-delay: 1.6s;

}



/* コアの脈打ちアニメーション */

@keyframes core-pulse {

0%, 100% {

  transform: scale(1);

  box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);

}

50% {

  transform: scale(1.2);

  /* 拡大時にシャドウも強くして発光感をアップ */

  box-shadow: 0 0 25px rgba(168, 85, 247, 0.8), 0 0 40px rgba(236, 72, 153, 0.4);

}

}



/* 波紋が広がるアニメーション */

@keyframes ring-pulse {

0% {

  transform: scale(1);

  opacity: 1;

  border-width: 2px;

  border-color: rgba(99, 102, 241, 1);

}

50% {

  border-color: rgba(168, 85, 247, 0.5);

  border-width: 1px;

}

100% {

  transform: scale(3.5);

  opacity: 0;

  border-width: 0px;

  border-color: rgba(236, 72, 153, 0);

}

}

</style>

Status de compatibilidade do navegador

| Navegador | Estado de compatibilidade | Notas |

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

| Cromo | ✅ Compatível | |

| Safári | ✅ Compatível | |

| Raposa de fogo | ✅ Compatível | |

| Borda | ✅ Compatível | |