Loader Pulse Ring

Một thành phần của bộ nạp sử dụng hiệu ứng xung với một vòng đẹp mắt lan tỏa như những gợn sóng.

Xem trước

Trường hợp sử dụng và tính năng

“Bộ tải vòng xung” này đặc biệt hiệu quả trong các tình huống sau.

Tải lên/tải xuống tệp: Lý tưởng khi bạn muốn thể hiện trực quan “nhịp tim” của dữ liệu được gửi và nhận.
Xử lý trong thời gian dài như phân tích dữ liệu và tạo AI: Không giống như hoạt ảnh xoay đơn giản, các biểu thức phong phú với các gợn sóng lan rộng giúp giảm căng thẳng trong khi người dùng chờ đợi.
Phần trung tâm anh hùng: Bởi vì nó nổi bật như một thành phần duy nhất nên nó cũng hoạt động rất đẹp như một trình giữ chỗ trong khi nội dung đang tải.

Điểm thiết kế và UX

Hiệu ứng tổng hợp của sự chuyển màu và bóng: Bằng cách sử dụng mức chuyển màu sống động (màu chàm-tím-hồng) ở vùng lõi trung tâm và thêm độ phát quang màu tương tự (bóng đổ), nó mang lại ấn tượng hiện đại và cao cấp.
Hoạt hình phi tuyến tính (cubic-bezier): Chúng tôi sử dụng cubic-bezier\ cho tốc độ lan rộng của vòng, tạo ra gợn sóng tự nhiên lúc đầu lan nhanh rồi biến mất dần.
Nhiều gợn sóng do độ trễ: Bằng cách đặt chênh lệch thời gian (animation-delay\) giữa nhiều vòng, chúng tôi tạo ra sự liên tục trong đó chuyển động luôn tiếp tục.

Cách tùy chỉnh

Thay đổi màu: Bạn có thể khớp màu chủ đề bằng cách thay đổi background: linear-gradient(...)\ của .pulse-core\ hoặc border-color\ của .pulse-ring\.
Kích thước và tốc độ của gợn sóng: Bằng cách tăng giá trị transform: scale(3.5)\ của @keyframes ring-pulse\, các gợn sóng sẽ lan rộng hơn và bằng cách thay đổi 2.5s\ của animation\, bạn có thể điều chỉnh tốc độ.
Điều kiện xung lõi: Bằng cách thay đổi transform: scale(1.2)\ của `@keyframes core-pulse“, bạn có thể thay đổi cường độ của nhịp tim ở trung tâm.

Mã triển khai

<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>
/* Vị trí container trong suốt bộ tải */

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

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích | Ghi chú |

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

| Chrome | ✅ Tương thích | |

| Safari | ✅ Tương thích | |

| Firefox | ✅ Tương thích | |

| Cạnh | ✅ Tương thích | |