Nabız Halkası Loader
Dalgalar gibi yayılan, geçişli ve halka animasyonlu bir yükleme döndürücü.
Dalgacıklar gibi yayılan güzel bir halkayla darbe efekti kullanan bir yükleyici bileşeni.
Önizleme
Kullanım durumları ve özellikleri
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.
Tasarım ve kullanıcı deneyiminin önemli noktaları
-
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.
Nasıl kişiselleştirilir
-
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.
Uygulama kodu
<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
| Tarayıcı | Uyumluluk durumu | Notlar |
| --- | --- | --- |
| Krom | ✅ Uyumlu | |
| Safari | ✅ Uyumlu | |
| Firefox | ✅ Uyumlu | |
| Kenar | ✅ Uyumlu | |