Воскресенье, 12 апреля 2020 13:52

Создаем красивый индикатор загрузки страницы с pace.js

Оцените материал

(1 Голосовать)

Для некоторых пользователей панель процесса загрузки (progress bar) является очень полезной вещью. Он информирует их о том, насколько они ближе к цели. Обычно используется для более удобного взаимодействия в пользователем. Когда вы открываете веб-страницу в своем любимом браузере, на вкладке браузера уже есть индикатор выполнения по умолчанию, который позволяет увидеть, полностью ли загружена страница.

С Pace.js теперь вы можете добавить свой индикатор загрузки страницы.

Pace.js - это JS-библиотека для создания красивой панели прогресса загрузки страницы на веб-сайте. Процесс выполнения определяется автоматически путем проверки AJAX- запросов, состояния готовности документа, задержки цикла обработки событий (выполнение JavaScript кода) и наличия определенных элементов на странице.

Если используется происходит AJAX-навигация или происходит событие pushState, индикатор выполнения будет перезапущен снова.

Начинаем

Pace.js очень просто внедрить. Для использования библиотеки необязательно подключать на сайте библиотеку jQuery. Вам необходимо просто подключить к веб-странице pace.js и выбранную на ваш вкус CSS-тему как можно выше в коде.

HTML

	<head>
	  <script src="/../pace.js"></script>
	  <link href="/../themes/pace-theme-corner-indicator.css" rel="stylesheet" />
	</head>

Вот и всё! Теперь на вашем сайте есть красивая полоса прогресса загрузки страниц.

красивый индикатор загрузки страницы с pace.js

Конфигурация

Библиотека не требует дополнительной настройки, так как Pace.js поставляется с полной автоматизацией. Но если конфигурация по умолчанию не соответствует вашим требованиям, вы можете использовать свои собственные настройки.

Для дальнейшей настройки есть два простых метода, которые вы можете использовать. Первый способ конфигурации – это размещение настроек в window.paceOption, как показано ниже.

JavaScript

	<script>
	paceOptions = {
	  // Configuration goes here. Example:
	  elements: false,
	  restartOnPushState: false,
	  restartOnRequestAfter: false
	}
	</script>

Второй метод - это использование опции внутри data-pace-option в теге <script> при подключении pace.js. Вы может сделать это следующим образом.

HTML

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

Полный список опций размещен на официальной странице библиотеки на gitHub

Заключение

В этот плагин включена куча готовых к использованию тем (CSS). Чтобы ознакомиться с полным списком тем, а также с их демо-страницами, вы можете перейти на сайт плагина (http://github.hubspot.com/pace/docs/welcome/). Если эти темы вам не подходят, вы можете легко создать свою собственную. Используя библиотеку Pace.js, вам не нужно беспокоиться о трудностях с внедрением индикатора загрузки страницы на ваш сайт.

Оригинал статьи: Create Beautiful Progress Bar For Website with Pace.js

Перевод: Земсков Матвей

Прочитано 6656 раз

Опубликовано в JavaScript, jQuery

Другие материалы в этой категории: « Создаем свой собственный эффект прокрутки страницы с помощью Roll.js Шпаргалка по переходу с jQuery на vanilla JavaScript »

	string(1) "1"
====string(1) "1"
====int(1)
====string(1) "1"
====bool(true)

Наверх