SnippetUI
← Back to snippets

Пульсирующий лоадер

Спиннер загрузки с градацией и кольцевой анимацией, распространяющейся как рябь.

HTMLCSS

Компонент-загрузчик, использующий импульсный эффект с красивым кольцом, распространяющимся как рябь.

Предварительный просмотр

Варианты использования и функции

Этот «импульсный кольцевой загрузчик» особенно эффективен в следующих ситуациях.

  • Загрузка/выгрузка файлов: идеально, если вы хотите визуально представить «пульсацию» отправляемых и получаемых данных.

  • Длительная обработка, такая как анализ данных и генерация искусственного интеллекта. В отличие от простой анимации вращения, насыщенные выражения с распространяющейся рябью снижают стресс, пока пользователи ждут.

  • Центр раздела «Герой»: поскольку он выделяется как отдельный элемент, он также прекрасно работает в качестве заполнителя во время загрузки контента.

##Точки дизайна и UX

  • Синергетический эффект градации и тени: использование яркой градации (индиго-фиолетово-розовый) в центральной части и добавление свечения аналогичного цвета (тень) создает впечатление современного и премиального.

  • Нелинейная анимация (кубическая кривая Безье): мы используем кубическую кривую Безье для определения скорости распространения кольца, создавая естественную рябь, которая сначала распространяется быстро, а затем постепенно исчезает.

  • Множественная рябь из-за задержки: устанавливая разницу во времени («анимацию-задержку») между несколькими кольцами, мы создаем непрерывность, при которой движение всегда продолжается.

Как настроить

  • Изменение цвета: вы можете подобрать цвет темы, изменив background: linear-gradient(...) для .pulse-core или border-color для .pulse-ring.

  • Размер и скорость ряби: увеличивая значение transform: Scale(3.5) для @keyframes Ring-Pulse, рябь будет распространяться дальше, а изменяя 2,5 секунды animation, вы можете регулировать скорость.

  • Условие пульсации ядра: изменяя transform: Scale(1.2) в @keyframes core-pulse, вы можете изменить интенсивность сердцебиения в центре.

Код реализации

<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>
/* Размещение контейнера по всему погрузчику */

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

Статус совместимости браузера

| Браузер | Статус совместимости | Заметки |

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

| Хром | ✅ Совместимость | |

| Сафари | ✅ Совместимость | |

| Firefox | ✅ Совместимость | |

| Край | ✅ Совместимость | |