Как сделать прелоадер: пошаговый способ добавления Preloader для сайта

Опубликовал(а): Артём Масальский
Обновлено: 20.03.2024

Мы покажем, как сделать прелоадер в виде анимации с появлением на экране во время загрузки.  Такой способ показывает пользователю, что процесс загрузки идет. Это может быть анимированный элемент, который предварительно загружается перед отображением основного содержимого сайта.

Как сделать прелоадер: пошаговый способ добавления Preloader для сайта
Как сделать прелоадер: пошаговый способ добавления Preloader для сайта

На заметку! Прелоадеры (Preloader) представляют собой ключевые элементы пользовательского интерфейса, которые информируют посетителей о том, что сайт не испытывает сбоев, а находится в процессе обработки данных.

Как добавить прелоадер для сайта

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

Шаг 1. В файле HTML создаются два div/a — контейнер для прелоадера и сам индикатор загрузки.

<div id="myPreloader" class="wrap-myLoader">
     <div class="myLoader"></div>
</div>

Шаг 2. Настройка стилей для блока-обертки прелоадера: 

.wrap-myLoader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 51;
    transition: 1s all;
    opacity: 1;
    visibility: visible;
}

Шаг 3. Для стилизации самого Prealoader мы центрируем его, задаем ширину и высоту, окрашиваем стороны в белый цвет, а одну сторону — в зеленый. С помощью свойства border-radius мы превращаем квадрат в круг. Также создаем класс .done, который мы добавим к обертке прелоадера после полной загрузки всех элементов, чтобы скрыть индикатор загрузки.

.myLoader {
    position: absolute;
    left: 49%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 6px solid #65a9ee;
    border-top-color: #0C3C6C;
    border-radius: 50%;
    animation: 1s myAnim linear infinite;
}
.cansel {
    opacity: 0;
    visibility: hidden;
}

Шаг 4. Определим ключевые кадры анимации.

@keyframes myAnim {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

Шаг 5. Устанавливаем параметры анимации: продолжительность — 1 секунда (то есть, от начального до конечного состояния круг будет пройден за 1 секунду), скорость анимации — равномерная, повторение анимации — бесконечное.

animation: 1s myAnim linear infinite;

Весь код на CSS:

.wrap-myLoader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 51;
    transition: 1s all;
    opacity: 1;
    visibility: visible;
}
.myLoader {
    position: absolute;
    left: 49%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 6px solid #65a9ee;
    border-top-color: #0C3C6C;
    border-radius: 50%;
    animation: 1s myAnim linear infinite;
}
.cansel {
    opacity: 0;
    visibility: hidden;
}

@keyframes myAnim {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

JavaScript-код: после того, как страница полностью загрузится, класс done будет добавлен к элементу с идентификатором myPreloader, что скроет прелоадер. Также устанавливаем задержку в миллисекундах перед скрытием (например, полсекунды).

document.body.onload = function() {
    setTimeout(function() {
        var preloader = document.getElementById("myPreloader");
        if (!preloader.classList.contains("cansel")) {
            preloader.classList.add("cansel");
        }
    }, 499)
};

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

Нажмите чтобы посмотреть демо
×

Обратите внимание! Существуют разные методы применения принципов CSS. Например для создания плавных анимаций и эффектов на веб-сайте. Рекомендуем статью — «Анимация появления блока с помощью CSS».

Креативные примеры preloader

Мигающие по очереди круги

<div class="load_dotted"></div>
<style>
.load_dotted {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: dotted 1s infinite linear alternate;
}
@keyframes dotted {
    0%  {box-shadow: 20px 0 #0C3C6C, -20px 0 #7dbeff;background: #0C3C6C }
    33% {box-shadow: 20px 0 #0C3C6C, -20px 0 #7dbeff;background: #7dbeff}
    66% {box-shadow: 20px 0 #7dbeff,-20px 0 #0C3C6C; background: #7dbeff}
    100%{box-shadow: 20px 0 #7dbeff,-20px 0 #0C3C6C; background: #0C3C6C }
}
</style>

Крутящиеся полосы

<div class="load_hoop"></div>
<style>
.load_hoop {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid #0000;
  border-right-color: #0080ff97;
  position: relative;
  animation: hoop 1s infinite linear;
}
.load_hoop:before,
.load_hoop:after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: inherit;
  animation: inherit;
  animation-duration: 2s;
}
.load_hoop:after {
  animation-duration: 4s;
}
@keyframes hoop {
  100% {transform: rotate(1turn)}
}
</style>

Перепрыгивающий круг

<div class="load_jump"></div>
<style>
.load_jump {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  transform: translateY(100%);
}
.load_jump::before,
.load_jump::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  transform-origin: bottom;
  position: relative;
}
.load_jump::before {
  background: radial-gradient(at 30% 30%,#0000,#000a) #65a9ee;
  transform: scaleY(0.65);
  top: 0;
  animation: jump-1, jump-2;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0,400,1,400),ease;
  animation-iteration-count: infinite;
}
.load_jump::after {
  background: #ccc;
  filter: blur(8px);
  transform: scaleY(0.3) translate(0px,0px);
  left: 0;
  animation: jump-3 2s cubic-bezier(0,400,1,400) infinite;
}
@keyframes jump-1 {
  100% {top:-0.2px}
}
@keyframes jump-2 {
  4%,96% {transform: scaleY(1)}
}
@keyframes jump-3 {
  100% {transform: scaleY(0.3) translate(0.1px,-0.1px)}
}
</style>

Точка с импульсом

<div class="load_pulse"></div>
<style>
.load_pulse {
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0C3C6C;
  box-shadow: 0 0 0 0 #0004;
  animation: pulse 1s infinite;
}
@keyframes pulse {
    100% {box-shadow: 0 0 0 30px #0000}
}
</style>

Раскладывающийся квадрат

<div class="load_square"></div>
<style>
  .load_square {
    width: 60px;
    aspect-ratio: 1;
    display: grid;
    grid: 50%/50%;
    color: #357cc4;
    --_g: no-repeat linear-gradient(currentColor 0 0);
    background: var(--_g),var(--_g),var(--_g);
    background-size: 50.1% 50.1%;
    animation: 
      square-0   1.5s infinite steps(1) alternate,
      square-0-0 3s   infinite steps(1);
  }
  .load_square::before {
    content: "";
    background: currentColor;
    transform: perspective(150px) rotateY(0deg) rotateX(0deg);
    transform-origin: bottom right; 
    animation: square-1 1.5s infinite linear alternate;
  }
  @keyframes square-0 {
    0%  {background-position: 0    100%,100% 100%,100% 0}
    33% {background-position: 100% 100%,100% 100%,100% 0}
    66% {background-position: 100% 0   ,100% 0   ,100% 0}
  }
  @keyframes square-0-0 {
    0%  {transform: scaleX(1)  rotate(0deg)}
    50% {transform: scaleX(-1) rotate(-90deg)}
  }
  @keyframes square-1 {
    16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
    33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
    66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
    100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
  }
</style>

Сливающиеся круги

<div class="load_merger"></div>
<style>
  .load_merger {
    width: 120px;
    height: 60px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background: #fff;
    filter: blur(5px) contrast(10) hue-rotate(60deg);
    mix-blend-mode: darken;
  }
  .load_merger:before,
  .load_merger:after {
    content: "";
    width: 40px;
    border-radius: 50%;
    background: #419ffc;
    animation: merger 1s infinite alternate;
  }
  .load_merger:after {
    --s:-1;
  }
  @keyframes merger{
    90%,100% {transform: translate(calc(var(--s,1)*30px))}
  }
</style>

Не пропустите эти статьи

как вставить во фрейме в адаптивный сайт

Как сделать адаптивное видео YouTube на CSS

Рассмотрим несколько способов, как сделать адаптивное видео YouTube на CSS и поместить на сайт таким…
Блочная модель в CSS высота блока и пропорции

Блочная модель в CSS: высота блока и пропорции

Блочная модель в CSS (box model) применяется к элементам, которые рассматриваются как блоки, определяя, как…
Высота блока в зависимости от ширины: высота и пропорции на CSS

Высота блока в зависимости от ширины: высота и пропорции на CSS

Высота блока в зависимости от ширины задается в различных единицах CSS: дюймах (in), пикселях (px),…

Используем CSS в создании геометрических фигур: 13 примеров несложных форм

Одним из увлекательных нововведений в CSS является возможность использования меньшего количества изображений в веб-дизайне и…

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *