» »

Preloader для сайта с помощью HTML и CSS

Preloader для сайта с помощью HTML и CSS

В статье представлена два Loaders или загрузчика для сайта и страниц, которые идут с интересным решениями CSS анимации для сайта на HTML и CSS. Они созданы на CSS со свойством animation и правилом @keyframe, которое задается в стилистике. Также проверены на сайте, ведь если мы говорим про второй вариант, то он в сети уже давно ходит, где многие его устанавливали.

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

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

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

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

Устанавливаем вниз сайта или на странице, где хотите видеть.

Код
<style type="text/css">#kudemilosaped>p{display:none;}#vedsutesan_kigudexam{display: block;position: fixed;z-index: 99999;top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;background: #186da7 url(http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/audio.svg) center center no-repeat;background-size:41px;}</style>
<div id="kudemilosaped"><div id="vedsutesan_kigudexam"></div></div>
<script type="text/javascript">var hellopreloader = document.getElementById("vedsutesan_kigudexam");function fadeOutnojquery(el){el.style.opacity = 1;var interhellopreloader = setInterval(function(){el.style.opacity = el.style.opacity - 0.05;if (el.style.opacity <=0.05){ clearInterval(interhellopreloader);hellopreloader.style.display = "none";}},16);}window.onload = function(){setTimeout(function(){fadeOutnojquery(hellopreloader);},1000);};</script>

На этом вся установка, остается только сохранить.

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

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

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

Красивый загрузчик для сайта

Код
<div id="gesekpolasnuved">  
  <div id="mugedsavu_kopibsamun">  
  <div id="cenudsaved_kotedub_lotung"></div>  
  </div>  
  </div>  
  <script>  
  jQuery(function($) {  
  $(window).load(function() {  
  $("#gesekpolasnuved").fadeOut(700);  
  });  
  });  
  </script>  
  <style>  

  #gesekpolasnuved {  
  background-color: #123;  
  bottom: 0;  
  display: block;  
  height: 100%;  
  left: 0;  
  position: fixed;  
  right: 0;  
  top: 0;  
  width: 100%;  
  z-index: 11000;  
  }  
  #mugedsavu_kopibsamun {  
  width: 300px;  
  height: 2px;  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  background-color: #f25;  
  }  
  #mugedsavu_kopibsamun::before,  
  #mugedsavu_kopibsamun::after {  
  content: '';  
  width: 75%;  
  height: 50%;  
  position: absolute;  
  left: 50%;  
  transform: translateX(-50%);  
  background-color: #f25;  
  animation: sub-lines 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;  
  }  
  #mugedsavu_kopibsamun::before {  
  top: -20px;  
  }  
  #mugedsavu_kopibsamun::after {  
  bottom: -20px;  
  }  
  #cenudsaved_kotedub_lotung {  
  width: 100%;  
  height: 100%;  
  position: absolute;  
  z-index: 20;  
  background-color: #123;  
  animation: mask 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;  
  }  
  @keyframes mask {  
  0% {  
  transform: scale(1, 1);  
  }  
  25% {  
  transform: scale(0, 1);  
  }  
  75% {  
  transform: scale(0, 1);  
  }  
  100% {  
  transform: scale(1, 1);  
  }  
  }  
  @keyframes sub-lines {  
  0% {  
  transform: translateX(-50%) scale(0, 1);  
  }  
  25% {  
  transform: translateX(-50%) scale(0, 1);  
  }  
  50% {  
  transform: translateX(-50%) scale(1, 1);  
  }  
  75% {  
  transform: translateX(-50%) scale(0, 1);  
  }  
  100% {  
  transform: translateX(-50%) scale(0, 1);  
  }  
  }  
  </style>

Preloader использует CSS-анимацию, которая широко поддерживается всеми современными браузерами, такими как Google Chrome и Mozilla Firefox.

Здесь нужно заметить, что все представленные загрузчики или Loaders, анимированные при помощи стилей CSS3, и по этому должны корректно и отлично показывать и работать на всех современных браузерах, где происходит поддержка свойств, таких как переходы и преобразование, @keyframes, анимации.

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

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

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

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