Dalgacıklar gibi yayılan güzel bir halkayla darbe efekti kullanan bir yükleyici bileşeni.
Bu “Darbe Halkalı Yükleyici” özellikle aşağıdaki durumlarda etkilidir.
Dosya yükleme/indirme: Gönderilen ve alınan verilerin “kalp atışını” görsel olarak temsil etmek istediğinizde idealdir.
Veri analizi ve yapay zeka oluşturma gibi uzun süreli işlemler: Basit döndürme animasyonunun aksine, yayılan dalgalara sahip zengin ifadeler, kullanıcılar beklerken stresi azaltır.
Kahraman Bölümü Merkezi: Tek bir öğe olarak öne çıktığı için içerik yüklenirken yer tutucu olarak da güzel çalışır.
Tonlama ve gölgenin sinerjik etkisi: Merkezi çekirdek alanda canlı bir tonlama (çivit mavisi-mor-pembe) kullanarak ve benzer renk parlaklığı (alt gölge) ekleyerek modern ve birinci sınıf bir izlenim verir.
Doğrusal olmayan animasyon (kübik-bezier): Halkanın yayılma hızı için “kübik-bezier” kullanıyoruz, önce hızla yayılan ve daha sonra yavaş yavaş kaybolan doğal bir dalga oluşturuyoruz.
Gecikme nedeniyle çoklu dalgalanma: Birden fazla zil arasında bir zaman farkı (“animasyon-gecikme”) ayarlayarak hareketin her zaman devam ettiği bir süreklilik yaratırız.
Renk değişimi: “.pulse-core”un “background: lineer-gradient(…)“ini veya “.pulse-ring”in “border-color”unu değiştirerek tema rengini eşleştirebilirsiniz.
Dalgalanmaların boyutu ve hızı: “@keyframes ring-pulse”un “transform: Scale(3.5)” değerini artırarak dalgalar daha da yayılır ve “animasyon”un “2,5 saniyesini” değiştirerek hızı ayarlayabilirsiniz.
Çekirdek nabız durumu: “@keyframes core-pulse”un “transform: Scale(1.2)” özelliğini değiştirerek, merkezdeki kalp atışının yoğunluğunu değiştirebilirsiniz.
<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>
/* Yükleyici boyunca konteyner yerleşimi */
.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>| Tarayıcı | Uyumluluk durumu | Notlar |
| --- | --- | --- |
| Krom | ✅ Uyumlu | |
| Safari | ✅ Uyumlu | |
| Firefox | ✅ Uyumlu | |
| Kenar | ✅ Uyumlu | |