Есть очень удобный и простой плагин, который позволяет показывать полосу загрузки сайта при его открытии. Когда страница полностью загружена — полоса пропадает.
pace.js написан на jQuery в связке с CSS стилями. Есть список уже готовых вариантов progress баров.
Установка
- Скачиваем pace.min.js и устанавливаем его между <head></head> вашего HTML документа
<script src="/js/pace.min.js"</script> <!-- нужно изменить путь на ваш -->
- После чего проходим по этой ссылке и выбираем нужный стиль для загрузки страницы и нажимаем «Download» для загрузки .css файла. После чего вам откроется пустая страница с исходным кодом .css файла. Вам нужно нажать правой кнопкой мыши и сохранить файл. После чего его тоже нужно подключить между <head></head>. Вот код:
<link rel="stylesheet" type="text/css" href="/css/pace.css">
Так же не забудьте изменить путь на ваш личный.
- Чтобы проверить работу данного плагина, раскидайте все файлы в нужные папки (проверьте путь в коде, чтобы все совпадало) и после чего зайдите на страницу (где вы ставили данный плагин) и во время загрузки страницы, должна появится анимация, которую вы выбрали на сайте разработчика.
PS. Чтобы изменить анимацию, вам нужно будет снова зайти на сайт разработчика, выбрать нужный вам стиль, скачать (так как мы уже скачивали, то нам уже этого делать не нужно) мы может просто скопировать код, открыть уже имеющийся код pace.css. Далее — удалить все из pace.css и вставить новый код, сохранить и проверить работоспособность анимации.
Так же для этого плагина есть подробная документация, если есть желание адаптировать данный плагин под свой сайт более подробно.
Приятного пользования.
Если у вас остались какие-либо вопросы, вы можете их задать в комментарии ниже.
