Loader de Anillo Pulsante

Un componente de carga que utiliza un efecto de pulso con un hermoso anillo que se extiende como ondas.

Vista previa

Casos de uso y características

Este “Cargador de anillo de impulsos” es particularmente eficaz en las siguientes situaciones.

Carga/descarga de archivos: ideal cuando desea representar visualmente el “latido” de los datos que se envían y reciben.
Procesamiento de larga duración, como análisis de datos y generación de IA: a diferencia de la animación de rotación simple, las expresiones ricas con ondas que se extienden reducen el estrés mientras los usuarios esperan.
Centro de la sección Hero: debido a que se destaca como un elemento único, también funciona maravillosamente como marcador de posición mientras se carga el contenido.

Puntos de diseño y UX

Efecto sinérgico de gradación y sombra: Al utilizar una gradación vívida (índigo-púrpura-rosa) en el área central central y agregar luminiscencia de color similar (sombra paralela), se da una impresión moderna y premium.
Animación no lineal (cubic-bezier): Usamos cubic-bezier para la velocidad a la que se expande el anillo, creando una onda natural que se propaga rápidamente al principio y luego desaparece gradualmente.
Múltiples ondulaciones debido al retraso: Al establecer una diferencia de tiempo (“retraso de animación”) entre múltiples anillos, creamos una continuidad donde el movimiento siempre continúa.

Cómo personalizar

Cambio de color: Puedes igualar el color del tema cambiando fondo: gradiente lineal(...) de .pulse-core o border-color de .pulse-ring.
Tamaño y velocidad de las ondas: Al aumentar el valor transform: scale(3.5) de @keyframes ring-pulse, las ondas se extenderán más y, al cambiar 2.5s de animación, puedes ajustar la velocidad.
Condición de pulsación central: al cambiar transform: scale(1.2) de @keyframes core-pulse, puedes cambiar la intensidad del latido del corazón en el centro.

Código de implementación

<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>
/* Colocación de contenedores en todo el cargador. */

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

Estado de compatibilidad del navegador

| Navegador | Estado de compatibilidad | Notas |

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

| Cromo | ✅Compatibles | |

| Safaris | ✅Compatibles | |

| Firefox | ✅Compatibles | |

| Borde | ✅Compatibles | |