IT'S NEW IT'S NEW

Прелоадер, его создание и варианты оформления

—
15:57
122
TopG
Полезности
  2. Лента блогов
  3. Прелоадер, его создание и варианты оформления

Поиск

Что такое прелоадер и зачем он нужен?

Прелоадер — это временный элемент интерфейса, отображаемый во время загрузки контента. Его задача — создать ощущение активности сайта и удержать пользователя, пока формируется страница. Но важно понимать, что прелоадер — это не панацея от медленной загрузки сайта, а скорее инструмент для улучшения пользовательского опыта в конкретных ситуациях.

SEO-совет: Использование прелоадера может положительно повлиять на показатели отказов, но только если он реализован правильно. Google учитывает время загрузки страницы в своих алгоритмах ранжирования, поэтому не заменяйте оптимизацию красивой анимацией.

Когда использовать прелоадер:

  • На лендингах или главных страницах сайта с большим количеством контента
  • Если на странице присутствуют HD-фото, модные слайдеры или 3D-модели
  • Когда некоторые скрипты активируются только после полной загрузки страницы

Когда от прелоадера лучше отказаться:

  • Если сайт загружается быстрее 1.5 секунд (проверьте через PageSpeed Insights)
  • Если прелоадер тяжелее 50 КБ (анимация не должна тормозить загрузку)
  • Если вы подключаете сторонние API, которые могут "висеть" минутами
Важно! Прелоадер — не замена оптимизации. Сначала сожмите изображения, минифицируйте CSS/JS, подключите кэширование. Только потом думайте об анимации.

Универсальная инструкция по установке прелоадера

Установка прелоадера состоит из трех основных частей: HTML структура, CSS стили и JavaScript для скрытия прелоадера после загрузки страницы.

HTML структура

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

<div class="preloader">
  <!-- Элементы прелоадера -->
</div>

CSS стили

Стилизуем прелоадер, делаем его фиксированным и центрируем содержимое.

.preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.5s;
  opacity: 1;
}
.preloader-remove {
  opacity: 0;
  z-index: -10;
}


JavaScript для скрытия прелоадера

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

document.addEventListener("DOMContentLoaded", function() {
  // Скрываем прелоадер через 2 секунды (страховочный таймер)
  setTimeout(function() {
    document.querySelector('.preloader').classList.add("preloader-remove");
  }, 2000);
});

Совет: Вместо window.onload используем DOMContentLoaded, чтобы прелоадер исчез раньше. Добавляем setTimeout для гарантии отображения анимации минимум 500 мс.

20 крутых примеров прелоадеров с кодом

Вариант 1: Плавающая SVG анимация

Элегантный прелоадер с двумя плавающими элементами и градиентной заливкой.

<div class="preloader-1">
  <svg>
    <g>
      <path d="M 50,100 A 1,1 0 0 1 50,0"/>
    </g>
    <g>
      <path d="M 50,75 A 1,1 0 0 0 50,-25"/>
    </g>
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#BFE2FF;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#0b5cd5;stop-opacity:1" />
      </linearGradient>
    </defs>
  </svg>
</div>
.preloader-1 svg {
  overflow: visible;
  width: 100px;
  height: 150px;
}
.preloader-1 svg g {
  animation: preloader-1-slide 2s linear infinite;
}
.preloader-1 svg g:nth-child(2) {
  animation-delay: 0.5s;
}
.preloader-1 svg g:nth-child(2) path {
  animation-delay: 0.5s;
  stroke-dasharray: 0px 158px;
  stroke-dashoffset: 1px;
}
.preloader-1 svg path {
  stroke: url(#gradient);
  stroke-width: 20px;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 0 157px;
  stroke-dashoffset: 0;
  animation: preloader-1-escalade 2s cubic-bezier(0.8, 0, 0.2, 1) infinite;
}
@keyframes preloader-1-slide {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(50px);
  }
}
@keyframes preloader-1-escalade {
  0% {
    stroke-dasharray: 0 157px;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 156px 157px;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 156px 157px;
    stroke-dashoffset: -156px;
  }
}

Вариант 2: Сетка с анимацией

Прелоадер в виде сетки из 25 элементов, которые плавно исчезают и появляются в определенном порядке.

<div class="preloader-2">
  <ul>
    <li></li>
    <li></li>
    ... (всего 25 элементов)
  </ul>
</div>
.preloader-2 {
  width: auto;
  height: auto;
}
.preloader-2 ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  animation: preloader-2-rot 16s linear infinite;
}
@keyframes preloader-2-rot {
  100% {
    transform: rotate(360deg);
  }
}
.preloader-2 li {
  width: 40px;
  height: 40px;
  background: #0b5cd5;
  border-radius: 4px;
  animation: preloader-2-scale 0.8s linear alternate infinite;
}
@keyframes preloader-2-scale {
  100% {
    transform: scale(0.1);
    opacity: 0;
  }
}
/* z-index для каждого элемента */
.preloader-2 li:nth-child(1) { z-index: 24; }
.preloader-2 li:nth-child(2) { z-index: 23; }
...
/* Задержки анимации для каждого элемента */
.preloader-2 li:nth-child(1) { animation-delay: 0.1s; }
.preloader-2 li:nth-child(2) { animation-delay: 0.2s; }
...

Вариант 3: Символ бесконечности

Элегантный прелоадер в виде символа бесконечности с плавной анимацией. Исправленная версия, теперь работает корректно.

<div class="preloader-3">
  <svg viewBox="-2000 -1000 4000 2000">
    <path id="inf" d="M354-354A500 500 0 1 1 354 354L-354-354A500 500 0 1 0-354 354z"></path>
    <use xlink:href="#inf" stroke-dasharray="1570 5143" stroke-dashoffset="6713px"></use>
  </svg>
</div>
.preloader-3 svg {
  max-width: 25em;
  border-radius: 3px;
  background: #FFF;
  fill: none;
  stroke: #BFE2FF;
  stroke-linecap: round;
  stroke-width: 12%;
}
.preloader-3 use {
  stroke: #0b5cd5;
  animation: preloader-3-a 2s linear infinite;
}
@keyframes preloader-3-a {
  to {
    stroke-dashoffset: 0px;
  }
}

Вариант 4: Кубическая сетка

Прелоадер в виде 3x3 сетки элементов, которые появляются и исчезают в определенном порядке.

<div class="preloader-4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
.preloader-4 {
  position: relative;
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 2px;
  width: 100px;
  height: 100px;
  margin: 30px auto;
}
.preloader-4 > div {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0b5cd5;
  transform: scale(0);
  transform-origin: center center;
  animation: preloader-4-anim 2s infinite linear;
}
.preloader-4 > div:nth-of-type(1),
.preloader-4 > div:nth-of-type(5),
.preloader-4 > div:nth-of-type(9) {
  animation-delay: 0.4s;
}
.preloader-4 > div:nth-of-type(4),
.preloader-4 > div:nth-of-type(8) {
  animation-delay: 0.2s;
}
.preloader-4 > div:nth-of-type(2),
.preloader-4 > div:nth-of-type(6) {
  animation-delay: 0.6s;
}
.preloader-4 > div:nth-of-type(3) {
  animation-delay: 0.8s;
}
@keyframes preloader-4-anim {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

Вариант 5: Вращающиеся круги

Три вращающихся круга с разной скоростью и направлением вращения.

<div class="preloader-5"></div>
.preloader-5 {
  display: block;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 30px auto;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #0b5cd5;
  animation: preloader-5-spin 2s linear infinite;
}
.preloader-5:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #BFE2FF;
  animation: preloader-5-spin 3s linear infinite;
}
.preloader-5:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #0b5cd5;
  animation: preloader-5-spin 1.5s linear infinite;
}
@keyframes preloader-5-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Вариант 6: Комплексный круговой прелоадер

Сложный прелоадер с несколькими элементами, вращающимися в разных направлениях и с разной скоростью.

<div class="preloader-6">
  <div class="circle"></div>
  <div class="circle-small"></div>
  <div class="circle-big"></div>
  <div class="circle-inner-inner"></div>
  <div class="circle-inner"></div>
</div>
.preloader-6 {
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.preloader-6 .circle {
  width: 180px;
  height: 180px;
  border-top: 10px solid #0b5cd5;
  border-right: 10px solid #0b5cd5;
  border-bottom: 10px solid #BFE2FF;
  border-left: 10px solid #BFE2FF;
  display: block;
  position: relative;
  border-radius: 50%;
  animation: preloader-6-rotate 5s infinite linear;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.preloader-6 .circle-small {
  width: 150px;
  height: 150px;
  border-top: 10px solid #BFE2FF;
  border-right: 10px solid #BFE2FF;
  border-bottom: 10px solid #0b5cd5;
  border-left: 10px solid #0b5cd5;
  display: block;
  position: absolute;
  border-radius: 50%;
  animation: preloader-6-rotate-rev 3s infinite linear;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.preloader-6 .circle-big {
  width: 210px;
  height: 210px;
  border: 4px dotted #0b5cd5;
  display: block;
  position: absolute;
  border-radius: 50%;
  animation: preloader-6-rotate-rev 10s infinite linear;
}
.preloader-6 .circle-inner {
  width: 80px;
  height: 80px;
  background-color: #0b5cd5;
  display: block;
  position: absolute;
  border-radius: 50%;
  animation: preloader-6-pulse 1.5s infinite ease-in;
  opacity: 1;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.preloader-6 .circle-inner-inner {
  width: 100px;
  height: 100px;
  background-color: #BFE2FF;
  display: block;
  position: absolute;
  border-radius: 50%;
  animation: preloader-6-pulse 1.5s infinite ease-in;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
@keyframes preloader-6-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes preloader-6-rotate-rev {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes preloader-6-pulse {
  0% {
    transform: scale(0.1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.1);
    opacity: 0.2;
  }
}

Вариант 7: Вложенные круги

Семь вложенных кругов, вращающихся с одинаковой скоростью.

<div class="preloader-7">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
.preloader-7 div {
  border-top: 10px solid #0b5cd5;
  border-right: 10px solid #0b5cd5;
  border-bottom: 10px solid transparent;
  border-left: 10px solid transparent;
  border-radius: 100%;
  padding: 4px;
  animation: preloader-7-spin 15s linear infinite;
}
@keyframes preloader-7-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Вариант 8: Минималистичный спиннер

Простой и элегантный спиннер с минимальным кодом.

<div class="preloader-8"></div>
.preloader-8 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
  border: 4px solid #BFE2FF;
  border-top-color: #0b5cd5;
  animation: preloader-8-spin 1s linear infinite;
}
@keyframes preloader-8-spin {
  100% {
    transform: rotate(360deg);
  }
}

Вариант 9: Прелоадер с прогресс-баром

Прелоадер с текстом и анимированным прогресс-баром.

Загрузка...
<div class="preloader-9">
  <div class="progress">
    <div class="progress-bar"></div>
  </div>
  <div class="text">Загрузка...</div>
</div>
.preloader-9 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
}
.preloader-9 .progress {
  width: 100%;
  height: 10px;
  background-color: #BFE2FF;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
.preloader-9 .progress-bar {
  height: 100%;
  background-color: #0b5cd5;
  width: 0%;
  animation: preloader-9-progress 3s linear infinite;
}
.preloader-9 .text {
  font-size: 14px;
  color: #0b5cd5;
}
@keyframes preloader-9-progress {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}

Вариант 10: Текстурированные точки

Прелоадер в виде трех пульсирующих точек с эффектом отскока.

<div class="preloader-10">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
.preloader-10 {
  display: flex;
  gap: 5px;
}
.preloader-10 .dot {
  width: 12px;
  height: 12px;
  background-color: #0b5cd5;
  border-radius: 50%;
  animation: preloader-10-bounce 1.5s ease-in-out infinite;
}
.preloader-10 .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.preloader-10 .dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes preloader-10-bounce {
  0%, 100% { transform: scale(0.5); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

Вариант 11: Простой спиннер

Минималистичный спиннер с вращающимся кольцом.

<div class="preloader-11"></div>
.preloader-11 {
  width: 60px;
  height: 60px;
  border: 5px solid #BFE2FF;
  border-top-color: #0b5cd5;
  border-radius: 50%;
  animation: preloader-11-spin 1.2s linear infinite;
}
@keyframes preloader-11-spin {
  100% {
    transform: rotate(360deg);
  }
}

Вариант 12: Волновой прелоадер

Прелоадер в виде бегущих волн, имитирующих звук.

<div class="preloader-12">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
.preloader-12 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 40px;
}
.preloader-12 .bar {
  width: 8px;
  height: 100%;
  background-color: #0b5cd5;
  margin: 0 2px;
  animation: preloader-12-wave 1.5s ease-in-out infinite;
}
.preloader-12 .bar:nth-child(2) {
  animation-delay: 0.2s;
}
.preloader-12 .bar:nth-child(3) {
  animation-delay: 0.4s;
}
.preloader-12 .bar:nth-child(4) {
  animation-delay: 0.6s;
}
.preloader-12 .bar:nth-child(5) {
  animation-delay: 0.8s;
}
@keyframes preloader-12-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

Вариант 13: Прыгающие точки по углам

Четыре точки, прыгающие по углам квадрата.

<div class="preloader-13">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
.preloader-13 {
  width: 80px;
  height: 80px;
  position: relative;
}
.preloader-13 .circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0b5cd5;
  position: absolute;
  animation: preloader-13-bounce 1.2s infinite ease-in-out;
}
.preloader-13 .circle:nth-child(1) {
  top: 0;
  left: 0;
}
.preloader-13 .circle:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: 0.3s;
}
.preloader-13 .circle:nth-child(3) {
  bottom: 0;
  right: 0;
  animation-delay: 0.6s;
}
.preloader-13 .circle:nth-child(4) {
  bottom: 0;
  left: 0;
  animation-delay: 0.9s;
}
@keyframes preloader-13-bounce {
  0%, 100% { transform: scale(0.5); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

Вариант 14: Прыгающие квадраты

Четыре квадрата, прыгающие по углам с поворотом.

<div class="preloader-14">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
.preloader-14 {
  width: 80px;
  height: 80px;
  position: relative;
  transform: rotate(45deg);
}
.preloader-14 .square {
  width: 25px;
  height: 25px;
  background-color: #0b5cd5;
  position: absolute;
  animation: preloader-14-scale 1.5s infinite ease-in-out;
}
.preloader-14 .square:nth-child(1) {
  top: 0;
  left: 0;
}
.preloader-14 .square:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: 0.3s;
}
.preloader-14 .square:nth-child(3) {
  bottom: 0;
  right: 0;
  animation-delay: 0.6s;
}
.preloader-14 .square:nth-child(4) {
  bottom: 0;
  left: 0;
  animation-delay: 0.9s;
}
@keyframes preloader-14-scale {
  0%, 100% { transform: scale(0.5); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

Вариант 15: Тройное вращение

Три кольца, вращающихся в разных направлениях.

<div class="preloader-15">
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
</div>
.preloader-15 {
  width: 80px;
  height: 80px;
  position: relative;
}
.preloader-15 .ring {
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #0b5cd5;
  border-radius: 50%;
  position: absolute;
}
.preloader-15 .ring:nth-child(1) {
  animation: preloader-15-spin 2s linear infinite;
}
.preloader-15 .ring:nth-child(2) {
  animation: preloader-15-spin 1.5s linear reverse infinite;
  transform: rotate(90deg);
}
.preloader-15 .ring:nth-child(3) {
  animation: preloader-15-spin 1s linear infinite;
  transform: rotate(180deg);
}
@keyframes preloader-15-spin {
  100% {
    transform: rotate(360deg);
  }
}

Вариант 16: Прыгающие точки по кругу

Четыре точки, прыгающие по кругу.

<div class="preloader-16">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
.preloader-16 {
  width: 60px;
  height: 60px;
  position: relative;
}
.preloader-16 .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #0b5cd5;
  position: absolute;
  animation: preloader-16-bounce 1s infinite ease-in-out;
}
.preloader-16 .circle:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}
.preloader-16 .circle:nth-child(2) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation-delay: 0.2s;
}
.preloader-16 .circle:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation-delay: 0.4s;
}
.preloader-16 .circle:nth-child(4) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.6s;
}
@keyframes preloader-16-bounce {
  0%, 100% { transform: scale(0.5); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

Вариант 17: Вращающийся квадрат

Один квадрат, вращающийся вокруг центра.

<div class="preloader-17">
  <div class="square"></div>
</div>
.preloader-17 {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.preloader-17 .square {
  width: 20px;
  height: 20px;
  background-color: #0b5cd5;
  animation: preloader-17-rotate 1.2s linear infinite;
  transform-origin: center;
}
@keyframes preloader-17-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Вариант 18: Прыгающие точки в линию

Три точки, прыгающие вверх-вниз.

<div class="preloader-18">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>
.preloader-18 {
  width: 80px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.preloader-18 .dot {
  width: 12px;
  height: 12px;
  background-color: #0b5cd5;
  border-radius: 50%;
}
.preloader-18 .dot:nth-child(1) {
  animation: preloader-18-move 1s infinite ease-in-out;
}
.preloader-18 .dot:nth-child(2) {
  animation: preloader-18-move 1s 0.2s infinite ease-in-out;
}
.preloader-18 .dot:nth-child(3) {
  animation: preloader-18-move 1s 0.4s infinite ease-in-out;
}
@keyframes preloader-18-move {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

Вариант 19: Пульсирующие точки по углам

Четыре точки, пульсирующие в углах квадрата.

<div class="preloader-19">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
.preloader-19 {
  width: 80px;
  height: 80px;
  position: relative;
}
.preloader-19 .circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0b5cd5;
  position: absolute;
}
.preloader-19 .circle:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: preloader-19-pulse 1.5s infinite ease-in-out;
}
.preloader-19 .circle:nth-child(2) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: preloader-19-pulse 1.5s 0.3s infinite ease-in-out;
}
.preloader-19 .circle:nth-child(3) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation: preloader-19-pulse 1.5s 0.6s infinite ease-in-out;
}
.preloader-19 .circle:nth-child(4) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: preloader-19-pulse 1.5s 0.9s infinite ease-in-out;
}
@keyframes preloader-19-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

Вариант 20: Тройное вращение с разными скоростями

Три кольца, вращающихся с разной скоростью.

<div class="preloader-20">
  <div class="ring"></div>
  <div class="ring"></div>
  <div class="ring"></div>
</div>
.preloader-20 {
  width: 80px;
  height: 80px;
  position: relative;
}
.preloader-20 .ring {
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: #0b5cd5;
  border-radius: 50%;
  position: absolute;
  animation: preloader-20-spin 2s linear infinite;
}
.preloader-20 .ring:nth-child(2) {
  border-top-color: #BFE2FF;
  transform: rotate(90deg);
  animation-duration: 1.5s;
}
.preloader-20 .ring:nth-child(3) {
  border-top-color: #0b5cd5;
  transform: rotate(180deg);
  animation-duration: 1s;
}
@keyframes preloader-20-spin {
  100% {
    transform: rotate(360deg);
  }
}


Советы по оптимизации прелоадеров

1
Не делайте тяжелее 20 КБ — используйте SVG вместо GIF.
2
Минимальное время отображения — 500 мс (иначе анимация будет «мигать»).
3
Тестируйте на слабых устройствах — прелоадер не должен тормозить из-за своей анимации.
4
Добавляйте текст — «Загружаем 3D-тур» вместо абстрактного спиннера повышает доверие.
5
Используйте локальные шрифты — чтобы текст не «прыгал» при загрузке.
6
Всегда добавляйте страховочный таймер — на случай, если какие-то скрипты зависнут.

Заключение

Прелоадер — полезный инструмент для удержания пользователей на медленных страницах, но не замена оптимизации. Выбирайте легкие анимации, тестируйте время загрузки и помните: если сайт грузится дольше 3 секунд — сначала ускоряйте его, а потом думайте об индикаторе.

Прелоадер, его создание и варианты оформления

Прелоадер (или спиннер загрузки) — это временной индикатор, который скрывает процесс формирования страницы и удерживает внимание пользователя. В этой статье вы узнаете, когда использовать прелоадер, а когда от него отказаться, а также получите 20 готовых решений с кодом, которые можно сразу внедрить в свой проект.

прелоадер для сайтасоздать прелоадерпримеры прелоадерованимация загрузкиbootstrap 4 прелоадероптимизация скорости сайтапользовательский интерфейсвеб-дизайнfrontendcss анимацииснижение показателя отказовиндикатор загрузки
—
15:57
122
TopG
Полезности
0
Светлана Светлана 1 месяц назад #
Очень познавательная статья! Практические примеры действительно помогают понять суть прелоадера. Спасибо за доступное изложение и полезный код и 20 вариантов.
Ответить
0
MrMax MrMax 1 месяц назад #
Бомба, Максим! Премиум-прелоадер спасает момент и держит фокус зрителя. Надо просто добавить кода – суперпрактично, коллеги, топ! Наслаждайтесь крутым результатом, небо без задержек!
Ответить

Читайте также:

Конвертер SVG в CSS
конвертеры
Конвертер SVG в CSS
Google fonts
шрифты
Google fonts
Creattie
иконки
Creattie
Scira AI
Текст
Scira AI
Durable
Текст
Durable
Cgtrader
3D
Cgtrader
Оставаясь на сайте, вы соглашаетесь с Политикой в отношении cookie. Если не согласны, покиньте сайт.