SnippetUI
← Back to snippets

Loader Pulse Ring

Loading spinner dengan gradasi dan animasi dering yang menyebar seperti riak.

HTMLCSS

Komponen loader yang menggunakan efek pulsa dengan cincin indah yang menyebar seperti riak.

Pratinjau

Kasus penggunaan dan fitur

“Pulse Ring Loader” ini sangat efektif dalam situasi berikut.

  • Mengunggah/mengunduh file: Ideal bila Anda ingin merepresentasikan “detak jantung” data yang dikirim dan diterima secara visual.

  • Pemrosesan jangka panjang seperti analisis data dan pembuatan AI: Tidak seperti animasi rotasi sederhana, ekspresi kaya dengan riak yang menyebar mengurangi stres saat pengguna menunggu.

  • Bagian Pusat Pahlawan: Karena menonjol sebagai elemen tunggal, ia juga berfungsi dengan baik sebagai pengganti saat konten dimuat.

Poin desain dan UX

  • Efek sinergis gradasi dan bayangan: Dengan menggunakan gradasi cerah (nila-ungu-merah muda) di area inti tengah dan menambahkan pendaran warna serupa (drop shadow), memberikan kesan modern dan premium.

  • Animasi non-linier (kubik-bezier): Kami menggunakan cubic-bezier\ untuk kecepatan penyebaran cincin, menciptakan riak alami yang awalnya menyebar dengan cepat dan kemudian perlahan menghilang.

  • Beberapa riak karena penundaan: Dengan menetapkan perbedaan waktu (animation-delay\) di antara beberapa dering, kami menciptakan kontinuitas di mana pergerakan selalu berlanjut.

Cara menyesuaikan

  • Perubahan warna: Anda dapat mencocokkan warna tema dengan mengubah background: linear-gradient(...)\ dari .pulse-core\ atau border-color\ dari .pulse-ring\.

  • Ukuran dan kecepatan riak: Dengan meningkatkan nilai transform: scale(3.5)\ dari @keyframes ring-pulse\, riak akan menyebar lebih jauh, dan dengan mengubah 2.5s\ dari animation\, Anda dapat menyesuaikan kecepatannya.

  • Kondisi denyut inti: Dengan mengubah transform: scale(1.2)\ dari @keyframes core-pulse\, Anda dapat mengubah intensitas detak jantung di tengah.

Kode implementasi

<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>
/* Penempatan kontainer di seluruh loader */

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

| Peramban | Status kompatibilitas | Catatan |

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

| krom | ✅ Kompatibel | |

| Safari | ✅ Kompatibel | |

| Firefox | ✅ Kompatibel | |

| Tepi | ✅ Kompatibel | |