Как прикрепить полосу загрузки (Progress Bar) как на YouTube себе на сайт

16 044 любопытных

С очередным обновлением дизайна популярного видео хостинга YouTube, в самом верху появился так называемый Progress Bar. А точнее это такая полоса, которая показывает прогресс загрузки страницы. Согласитесь, что это довольно интересное решение. И конечно же многие веб мастера захотели себе такое новое чудо, и начали искать решения.

Не удивительно, что решение очень быстро нашли, теперь подобной полосой может похвастаться чуть ли не каждый веб мастер. К тому же эту полоску не так уж сложно установить, в общем, что мы сейчас и рассмотрим.

Как добавить на сайт полосу загрузки как на YouTube

Демо ι Скачать

Установка

Как я уже говорил, что велосипед мы создавать не будем, а воспользуемся уже готовым вот этим плагином.

Вам нужно только скачать его и сделать следующее:

Скиньте два файла nprogress.css и nprogress.js к себе на хостинг, после этого на своём сайте в коде HTML укажите путь для них. Если Вы скините эти файлы прям в корневой каталог то путь будет выглядеть так:

<script src="nprogress.js"></script>

<link rel="stylesheet" type="text/css" href="nprogress.css" />

После этого между тегами <head> и </head> вставьте следующий скрипт:

<script>
 $('body').show();
 $('.version').text(NProgress.version);
 NProgress.start();
 setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
 </script>

Всё! теперь можете наслаждаться своей полосой.