ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированный CSS прелоадер для сайта

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

Анимированный CSS прелоадер для сайта
Отличный анимированный прелоадер для сайта, который выполнен на чистом CSS, что предназначен для сайта или приложения при загрузках открытия. Ведь любая страница на интернет сайте не подгружается в доли секунды, для этого нужно небольшое время, чтоб все корректно отображалось. И здесь все можно скрыть, и не отвлекаться, как все будет постепенно загружаться, где подключаем прелоадер, что только появится на то время, что нужно странице для полной загрузки.

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

При проверки с demo страницы:

Пролайдер на сайт в чистом CSS

Установка:

HTML

Код
<div class="Loader-scrolling">
  <hr/><hr/><hr/><hr/>
</div>

CSS

Код
.Loader-scrolling{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
  width:100px;
  height:100px;
}
.Loader-scrolling hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.Loader-scrolling :first-child{background:#17c5a5;animation-delay:-1.5s}
.Loader-scrolling :nth-child(2){background:#ef5350;animation-delay:-1s}
.Loader-scrolling :nth-child(3){background:#eca75a;animation-delay:-0.5s}
.Loader-scrolling :last-child{background:#31718a}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

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

Демонстрация
2020-05-29 Загрузок: 1 Просмотров: 293 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar