ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Прелоадер на CSS3 виде анимации

Прелоадер на CSS3 виде анимации

Прелоадер на CSS3 виде анимации
Красиво выполнен по дизайну загрузчик и прелоадер на темном фоне, где идет для страниц в виде 3 элементов на CSS, что крутятся в разных формах. Вероятно, что многие уже в курсе про прелоадер, и для чего его устанавливают на сайт, если нет, то давайте по технике немного пробежим. Значение Прелоадер, где с английского "preloader" — здесь все просто, он выполняет очень простую функцию.

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

На современных сайтах можно увидеть такой элемент загрузки, тут главное, чтоб он отлично вписался на сайте. Где изначально выставляли изображение в формате GIF, но сейчас все на чистом стиле и скрипте можно отлично все сделать.

HTML

Код
<div id="preloadery-dlya-sayta">
  <div id="css-animation"></div>
  </div>

CSS

Код
#preloadery-dlya-sayta {
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999999;
}

#css-animation {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #9370DB;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#css-animation:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #BA55D3;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#css-animation:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #FF00FF;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}

JS

Код
jQuery(document).ready(function($) {  
  $(window).on("load",function (){

  $("#preloadery-dlya-sayta").fadeOut(500);

  });

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

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

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

Демонстрация
16 Июля 2019 Загрузок: 2 Просмотров: 1039 Комментариев: (0)

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

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

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

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