Лого www.SiteHere.ru

Собственный индикатор загрузки страницы

Собственный индикатор загрузки страницы

Существует множество способов придать сайту уникальности, сделать его особенным. Для этого мы постоянно совершенствуем дизайн сайта, добавляем новые возможности в функционал. Но одним из элементов, который выделит ваш сайт среди остальных — это индикатор загрузки страницы, собственный индикатор загрузки страницы. Как правило, страница не может загрузиться очень быстро, а в это время, пока страница загружается, можно вывести красивый индикатор загрузки.

Для создания индикатора загрузки мы будем использовать плагин Pace.js. Этот плагин предназначен для создания красивых индикаторов загрузки на вашем сайте. Полоса загрузки заполняется автоматически, используя AJAX запросы.

Скачать данный плагин можно — здесь.

Как установить индикатор загрузки на свой сайт?

1 шаг. Скачиваем данный плагин, разархивируем в папку, где у вас лежат все скрипты.

Затем подключаем данный плагин, вставляя данный плагин между тегами <head> </head>:

1
2
3
<head>
<script src="pace.min.js"></script>
</head>

2 шаг. Выбираем цвет индикатора загрузки.

Переходим по адресу — ссылка.

Там видим следующее поле для ввода:

Выбор цвета индикатора

Здесь в шестнадцатеричном виде вводим цвет, который подходит по цветовой гамме вашей теме. Советую для этого использовать программу ColorMania.

3 шаг. Выбираем стиль индикатора загрузки.

Спускаемся немного ниже и выбираем понравившийся индикатор загрузки.

Выбираем стиль индикатора

Нажимаем по ссылке «Download» и увидите CSS код. Его необходимо скопировать и вставить в файл стилей вашей темы.

4 шаг. Вставляем одну строку Javascript.

Также между тегами <head> </head> вставляем следующий код:

1
<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

Вывод

Pace.js поддерживает IE8+, FF 3.5+, Chrome, Safari 4 +, Opera 10.5 +, и все современные мобильные браузеры. Согласитесь, иметь собственную полосу загрузки, будет отличать ваш сайт от всех остальных.

Успехов!

Источник: http://www.hongkiat.com/blog/pacejs-progress-bar/

Собственный индикатор загрузки страницы 4.00/5 (80.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

25 комментариев к записи
  • anton

    где брать pace.js?

     
  • anton

    не работает в общем

     
    • Юрий

      Значит, вы делаете что-то не так.

       
  • Виктор

    Только вот эта строчка не нужна, с ней не пропадет индикатор
    😉

     
  • Александр

    Вот так работает
    Как у них на сайте написано 😉

     
  • llizard

    А дему не хочете показать?

     
    • Юрий

      llizard, ссылка на официальный сайт — Перейти.

       
      • lizard

        Извените меня, я не внемательная растяпа! А я хотел спросить, на одном из скрине видно такой зеленый уголок справа сверху с круглым индикатором, а я только на ссылке нашол простй индикатор загрузки по центру. Либо я такой не внемательный, либо того что на скрине, на ссылке которую вы дали действительно нет?

         
        • Юрий

          Я так понял вы имеете в виду тип «Corner Indicator», он там есть, нужно прокрутить страницу намного ниже.

           
  • ЯНЕЛЕНА

    Ставим и проверяем, заменяем на своё. Всё работает

     
  • Vinci

    Привет Юрий и спасибо за этот ресурс.
    У меня только один вопрос по этому топику ответ не который я не могу найти в документации.
    Как сделать так что бы всё содержимое страницы показывалось только после полной загрузки.

    Спасибо заранее за ответ.

     
    • Юрий

      Чтобы сделать это, нужно использовать jQuery. К примеру можно вот таким образом (разместить перед закрывающим тегом body):

      <script>
      $(function(){
          $(".hidescreen, .load_page").fadeIn(10); // фон+индикатор
          $(window).load(function() {
              $(".hidescreen,.load_page").fadeOut(600); // скрываем фон+индикатор
          });
      });
      </script>

      где блок с классом hidescreen — это блок, который перекрывает весь сайт (например просто черный или белый), а блок с классом load_page содержит сам индикатор (или просто gif-анимацию загрузки).

      P.S.: убедитесь в том, что подключена библиотека jQuery.

       
      • Денис

        Библиотека подключена, но страницу все равно видно

         
    • Ярослав

      body > :not(.pace),body:before,body:after {
        -webkit-transition:opacity .4s ease-in-out;
        -moz-transition:opacity .4s ease-in-out;
        -o-transition:opacity .4s ease-in-out;
        -ms-transition:opacity .4s ease-in-out;
        transition:opacity .4s ease-in-out
      }

      body:not(.pace-done) > :not(.pace),body:not(.pace-done):before,body:not(.pace-done):after {
        opacity:0
      }

       
      • Дмитрий

        Блестяще! И не надо никакого jQuery! Спасибо!

         
  • ЯНЕЛЕНА

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

     
  • Михаил

    Большое спасибо, все работает!

     
  • Комрон

    Сделал что так как написано, но не работает. Можете мне помочь?

     
    • Юрий Немец

      Добрый день. Что конкретно не работает? Какие ошибки выдает?

       
      • Комрон

        Исправил все работает спасибо вам большое за отзыв

         
  • Олег

    Здравствуйте!

    У вам в 1 шаге указан pace.min.js, а в шаге 2 уже pace.js.
    В итоге ничего непонятно, где брать pace.js, если вы даете скачать только pace.min.js.
    Это два разных скрипта или один и тот же?

    В итоге сделал что скрипт загружается сразу из  http://github.hubspot.com/pace/docs/welcome/.

     
    • Юрий Немец

      Здравствуйте, Олег!

      Pace.min.js — это сжатая версия библиотеки pace.js.

       
  • boby

    не работает dle 10.5

     
    • Юрий Немец

      Это не плагин для CMS, а JS плагин, который нужно лишь правильно подключить.

       

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *