ZorNet.Ru — сайт для вебмастера » HTML и CSS » Прелоадер для загрузки страницы сайта

Прелоадер для загрузки страницы сайта

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

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

Вообще загрузчиков, как правило, выполняют любые вызовы для появления Loader из основного потока своего процесса, или преобразовывают интернет ресурсы определенного типа, которые могут быть объединены в модуль. Его можно применять как на полноценном интернет ресурсе, где будут задействованы все страницы или поставить на отдельную категорию.

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

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

Первый вариант:

Индикатор загрузки на чистом CSS

HTML

Код

<span id="matevoman-compegsad"></span>
<div id="copeonaceving">
<p>Здесь размещен контент на сайте</p>
</div>

CSS

Код

#copeonaceving {
  opacity: 0;
}

#matevoman-compegsad{
  position: fixed;
  width: 70px;
  height: 70px;
  left: 50%;
}

Код

Здесь при открытие страницы появляется надпись "ЗАГРУЗКА", которую можно переписать как вам угодно, и когда загрузка проходит, то только после этого появляться контент.

Демонстрация

Второй вариант:

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

HTML

Код

CSS

Код

.sagruzsikan {
  background: #171719;
  background: radial-gradient(#1d1c1c, #171719);
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
}

.makinub-gasamekis {
  bottom: 0;
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}

.pedueven-kemos-grasundev {
  animation:
  spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
  ;
  box-sizing: border-box;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 100px;
}
.achievid-ngmekis {
  border: 4px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 100px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.pedueven-kemos-grasundev:nth-child(1) { animation-delay: -50ms; }
.pedueven-kemos-grasundev:nth-child(2) { animation-delay: -100ms; }
.pedueven-kemos-grasundev:nth-child(3) { animation-delay: -150ms; }
.pedueven-kemos-grasundev:nth-child(4) { animation-delay: -200ms; }
.pedueven-kemos-grasundev:nth-child(5) { animation-delay: -250ms; }

.pedueven-kemos-grasundev:nth-child(1) .achievid-ngmekis {
  border-color: hsl(0, 80%, 60%);
  height: 90px;
  width: 90px;
  top: 7px;
}
.pedueven-kemos-grasundev:nth-child(2) .achievid-ngmekis {
  border-color: hsl(60, 80%, 60%);
  height: 76px;
  width: 76px;
  top: 14px;
}
.pedueven-kemos-grasundev:nth-child(3) .achievid-ngmekis {
  border-color: hsl(120, 80%, 60%);
  height: 62px;
  width: 62px;
  top: 21px;
}
.pedueven-kemos-grasundev:nth-child(4) .achievid-ngmekis {
  border-color: hsl(180, 80%, 60%);
  height: 48px;
  width: 48px;
  top: 28px;
}
.pedueven-kemos-grasundev:nth-child(5) .achievid-ngmekis {
  border-color: hsl(240, 80%, 60%);
  height: 34px;
  width: 34px;
  top: 35px;
}

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

Код

$(window).load(function() {
  setTimeout(function () {
  $(".sagruzsikan").delay(100).fadeOut().remove();
  }, 2000);
});

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

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

Демонстрация

04 Января 2019 Загрузок: 1 Просмотров: 1391 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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