ГлавнаяHTML/CSS → Анимированный прелоадер для сайта на чистом CSS
HTML/CSS

Анимированный прелоадер для сайта на чистом CSS

Анимированный прелоадер для сайта на чистом CSS
HTML/CSS
Подпишись на нас в телеграм @coderoll
Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.

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

Шаг 1
Добавляем наш прелоадер в наш HTML.
<div class="load">
  <hr/><hr/><hr/><hr/>
</div>

Шаг 2
Добавляем стили в наш CSS.
.load{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  /*change these sizes to fit into your project*/
  width:100px;
  height:100px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#19A68C;animation-delay:-1.5s}
.load :nth-child(2){background:#F63D3A;animation-delay:-1s}
.load :nth-child(3){background:#FDA543;animation-delay:-0.5s}
.load :last-child{background:#193B48}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}
1 комментарий
  1. Аватар пользователя
    OTRICALA
    0
    Щас бы вместо спанов юзать hr
Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив