Бегущая полоса - индикатор загрузки страницы
Содержание:
Примеры реализации автоматического индикатора загрузки веб-страницы. Анимированная полоса вверху страницы сайта при её загрузке или обновлении. Появляется как и при полной перезагрузке страницы, так и при обновлении 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