Бегущая полоса - автоматический индикатор загрузки страницы

Бегущая полоса - индикатор загрузки страницы

Примеры реализации автоматического индикатора загрузки веб-страницы. Анимированная полоса вверху страницы сайта при её загрузке или обновлении. Появляется как и при полной перезагрузке страницы, так и при обновлении AJAX и PJAX.

Самый простой пример

Самый простой способ сделать автоматический индикатор загрузки веб-страницы:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Автоматический индикатор загрузки страницы</title>
  <style>
    #progress {
      position: fixed;
      z-index: 100;
      top: 0;
      left: -6px;
      width: 1%;
      height: 3px;
      background: red;
      border-radius: 1px; 
      transition: width 500ms ease-out, opacity 400ms linear;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $(function() {	 
      $("#progress").width((50 + Math.random() * 30) + "%");
      $(window).on('load', function() {
        $("#progress").width("101%").delay(300).fadeOut(400);
      });
    });
  </script>
</head>
<body>
  <div id="progress"></div>
</body>
</html>

Pace - автоматический индикатор загрузки веб-страницы

Предыдущий способ является самым простым, наверное. Если на сайте используется AJAX, то он с ним работать не будет. Для этого можно использовать готовые библиотеки для реализации автоматического индикатора загрузки страницы сайта с поддержкой ajax-запросов. Одной из таких библиотек является Pace. Pace - это библиотека JavaScript, не использующая каких-либо дополнительных зависимостей.

Краткая инструкция по установке и настройке Pace:

Официальный сайт Pace здесь

Репозиторий на GitHub здесь

Прямая ссылка на скачивание с GitHub здесь

Далее всё очень просто. Достаточно подключить два файла: саму библиотеку и любую тему на выбор:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>PACE</title>	
  <!-- Подключаем тему -->
  <link rel="stylesheet" href="pace-theme-minimal.css">
  </head>
  <body>
  <!-- some code -->

  <!-- Подключаем библиотеку Pace -->
  <script src="pace.min.js"></script>
  </body>
</html>