Материал

20.12.16

Индикатор загрузки страниц для сайта на pace.js

Интернет сайты и страницы часто имеют объем, который не всегда позволяет красивы и быстро отобразить содержимое. Или страница подгружается частями или же происходит наслоение изображений или текста до загрузки модулей на Jquery и JavaScript. Также не всегда это зависит от перегруженности сайта, зачастую просто медленная скорость Интернета не позволяет быстро открывать страницы.

Для решения этой проблемы существует JavaScript приложение PACE. Этот модуль нужно просто встроить в шапку вашей страницы, выбрав подходящий стиль. На момент написания материала на официальном сайте разработчика имеется 14 различных шаблонов загрузки.

<script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />

Первая строка загружает pace.js. Вторая загружает шаблон.
Список файлов шаблонов:

pace-theme-barber-shop.tmpl.css
pace-theme-big-counter.tmpl.css
pace-theme-bounce.tmpl.css
pace-theme-center-atom.tmpl.css
pace-theme-center-circle.tmpl.css
pace-theme-center-radar.tmpl.css
pace-theme-center-simple.tmpl.css
pace-theme-corner-indicator.tmpl.css
pace-theme-fill-left.tmpl.css
pace-theme-flash.tmpl.css
pace-theme-flat-top.tmpl.css
pace-theme-loading-bar.tmpl.css
pace-theme-mac-osx.tmpl.css
pace-theme-minimal.tmpl.css

vse

Ну и конечно знатокам css не составит особого труда создать свои шаблон индикатора загрузки.

Загрузить pace.js с официального сайта.