Preloader для Вашего сайта

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

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен как в виде анимированного gif-изображения, так и в виде шкалы загрузки. Но независимо от внешнего вида прелоадера, принцип его работы будет одним и тем же: как можно раньше показать пользователю индикатор загрузки, а по окончании загрузки этот индикатор скрыть. 

Установка: 

Вставьте код в «Нижнюю часть сайта»: 
Код
<ol>
  <li><code><!-- Начало:Preloader --> </code></li>
  <li><code><div id="preloader"> </code></li>
  <li><code>          <div id="preloader-lines"> </code></li>
  <li><code>          <div id="preloader-lines__mask"></div> </code></li>
  <li><code>          </div> </code></li>
  <li><code></div> </code></li>
  <li><code><script> </code></li>
  <li><code>          // Preloader by bloject.ucoz.ru </code></li>
  <li><code>          jQuery(function($) { </code></li>
  <li><code>          $(window).load(function() { </code></li>
  <li><code>              $("#preloader").fadeOut(700); </code></li>
  <li><code>          }); </code></li>
  <li><code>          }); </code></li>
  <li><code></script> </code></li>
  <li><code><style> </code></li>
  <li><code>          /* Preloader by bloject.ucoz.ru */ </code></li>
  <li><code>          #preloader { </code></li>
  <li><code>          background-color: #123; </code></li>
  <li><code>          bottom: 0; </code></li>
  <li><code>          display: block; </code></li>
  <li><code>          height: 100%; </code></li>
  <li><code>          left: 0; </code></li>
  <li><code>          position: fixed; </code></li>
  <li><code>          right: 0; </code></li>
  <li><code>          top: 0; </code></li>
  <li><code>          width: 100%; </code></li>
  <li><code>          z-index: 11000; </code></li>
  <li><code>          } </code></li>
  <li><code>          #preloader-lines { </code></li>
  <li><code>          width: 300px; </code></li>
  <li><code>          height: 2px; </code></li>
  <li><code>          position: absolute; </code></li>
  <li><code>          top: 50%; </code></li>
  <li><code>          left: 50%; </code></li>
  <li><code>          transform: translate(-50%, -50%); </code></li>
  <li><code>          background-color: #f25; </code></li>
  <li><code>          } </code></li>
  <li><code>          #preloader-lines::before, </code></li>
  <li><code>          #preloader-lines::after { </code></li>
  <li><code>          content: ''; </code></li>
  <li><code>          width: 75%; </code></li>
  <li><code>          height: 50%; </code></li>
  <li><code>          position: absolute; </code></li>
  <li><code>          left: 50%; </code></li>
  <li><code>          transform: translateX(-50%); </code></li>
  <li><code>          background-color: #f25; </code></li>
  <li><code>          animation: sub-lines 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite; </code></li>
  <li><code>          } </code></li>
  <li><code>          #preloader-lines::before { </code></li>
  <li><code>          top: -20px; </code></li>
  <li><code>          } </code></li>
  <li><code>          #preloader-lines::after { </code></li>
  <li><code>          bottom: -20px; </code></li>
  <li><code>          } </code></li>
  <li><code>          #preloader-lines__mask { </code></li>
  <li><code>          width: 100%; </code></li>
  <li><code>          height: 100%; </code></li>
  <li><code>          position: absolute; </code></li>
  <li><code>          z-index: 20; </code></li>
  <li><code>          background-color: #123; </code></li>
  <li><code>          animation: mask 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite; </code></li>
  <li><code>          } </code></li>
  <li><code>          @keyframes mask { </code></li>
  <li><code>          0% { </code></li>
  <li><code>              transform: scale(1, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          25% { </code></li>
  <li><code>              transform: scale(0, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          75% { </code></li>
  <li><code>              transform: scale(0, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          100% { </code></li>
  <li><code>              transform: scale(1, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          } </code></li>
  <li><code>          @keyframes sub-lines { </code></li>
  <li><code>          0% { </code></li>
  <li><code>              transform: translateX(-50%) scale(0, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          25% { </code></li>
  <li><code>              transform: translateX(-50%) scale(0, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          50% { </code></li>
  <li><code>              transform: translateX(-50%) scale(1, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          75% { </code></li>
  <li><code>              transform: translateX(-50%) scale(0, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          100% { </code></li>
  <li><code>              transform: translateX(-50%) scale(0, 1); </code></li>
  <li><code>          } </code></li>
  <li><code>          } </code></li>
  <li><code></style> </code></li>
  <li><code><!-- Конец:Preloader --></code></li>
</ol>

  • Дата: 29.05.2018, 09:55
  • Просмотры: 49
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий