Бегущая полоса - индикатор загрузки страницы
Примеры реализации автоматического индикатора загрузки веб-страницы. Анимированная полоса вверху страницы сайта при её загрузке или обновлении. Появляется как и при полной перезагрузке страницы, так и при обновлении 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>
Пакет для Yii2 на основе библиотеки Pace
Есть готовые расширения для Yii2 на основе вышеуказанной библиотеки Pace. Вот некоторые из них:
- https://github.com/ercling/yii2-pace
- https://github.com/uran1980/yii2-pace-widget
- https://github.com/phpnt/yii2-pace