Pulse-Ring-Loader

Eine Loader-Komponente, die einen Pulseffekt mit einem schönen Ring nutzt, der sich wie Wellen ausbreitet.

Vorschau

Anwendungsfälle und Funktionen

Dieser „Pulse Ring Loader“ ist in den folgenden Situationen besonders effektiv.

• Hochladen/Herunterladen von Dateien: Ideal, wenn Sie den „Herzschlag“ der gesendeten und empfangenen Daten visuell darstellen möchten.

• Langzeitverarbeitung wie Datenanalyse und KI-Generierung: Im Gegensatz zu einfachen Rotationsanimationen reduzieren reichhaltige Ausdrücke mit sich ausbreitenden Wellen den Stress, während Benutzer warten.

• Bereich „Center of Hero“: Da er als einzelnes Element hervorsticht, funktioniert er auch hervorragend als Platzhalter beim Laden von Inhalten.

Design- und UX-Punkte

• Synergistischer Effekt von Abstufung und Schatten: Durch die Verwendung einer lebendigen Abstufung (Indigo-Lila-Rosa) im zentralen Kernbereich und das Hinzufügen ähnlicher Farblumineszenz (Schlagschatten) entsteht ein moderner und hochwertiger Eindruck.

• Nichtlineare Animation (Kubik-Bezier): Wir verwenden „Kubik-Bezier“ für die Geschwindigkeit, mit der sich der Ring ausbreitet, wodurch eine natürliche Welle entsteht, die sich zunächst schnell ausbreitet und dann allmählich verschwindet.

• Mehrere Wellen aufgrund der Verzögerung: Indem wir einen Zeitunterschied („animation-delay“) zwischen mehreren Ringen festlegen, schaffen wir eine Kontinuität, bei der die Bewegung immer weitergeht.

So passen Sie es an

• Farbänderung: Sie können die Designfarbe anpassen, indem Sie „background: linear-gradient(…)“ von „.pulse-core“ oder „border-color“ von „.pulse-ring“ ändern.

• Größe und Geschwindigkeit der Wellen: Durch Erhöhen des „transform: scale(3.5)“-Werts von „@keyframes ring-pulse“ breiten sich die Wellen weiter aus, und durch Ändern von „2,5s“ von „animation“ können Sie die Geschwindigkeit anpassen.

• Kernpulsationsbedingung: Durch Ändern von „transform: scale(1.2)“ von „@keyframes core-pulse“ können Sie die Intensität des Herzschlags in der Mitte ändern.

Implementierungscode

<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>
/* Containerplatzierung im gesamten Lader */

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

Browserkompatibilitätsstatus

| Browser | Kompatibilitätsstatus | Notizen |

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

| Chrom | ✅ Kompatibel | |

| Safari | ✅ Kompatibel | |

| Firefox | ✅ Kompatibel | |

| Kante | ✅ Kompatibel | |