NProgress pasek postępu ładowania strony jak na youtube.com

NProgress.js jest prostą biblioteką umożliwiającą uzyskanie efektu paska postępu ładowania strony. Ostatnio (chyba tylko testowo) taki pasek postępu wprowadził youtube, wygląda to bardzo ciekawie. Poniżej krótki opis jak zainstalować i dopasować wygląd biblioteki do swojej strony. Demo dostępne po przeładowaniu strony 😉

Krok pierwszy to pobranie biblioteki z githuba. Na stronie autora NProgress jest odnośnik do pobrania paczki. Najlepiej pobrać całość ponieważ NProgress opiera się o bibliotekę jquery, która znajduje się również w paczce. Nas interesują 3 konkretne pliki.

– nprogress.css
– nprogress.js
– jquery.js w wersji 1.8 lub wyższej (ja wziąłem z paczki wersję jquery-1.10.js)

Krok drugi, należy dołączyć wszystkie 3 pliki do strony, najlepiej w sekcji head

  <script src="jquery-1.10.js"></script>
  <script src="nprogress.js"></script>
  <link rel="stylesheet" type="text/css" media="all"nprogress.css" />

Krok trzeci to wywołanie funkcji biblioteki. Podstawowy skrypt wywołuje się dwoma funkcjami, jedna odpowiada za rozpoczęcie skryptu, druga za zakończenie.

NProgress.start();
NProgress.done();

Pierwszą funkcję start() (moim zdaniem) najlepiej jest dodać na początku strony, w sekcji head zaraz po dołączonych plikach.

  <script src="jquery-1.10.js"></script>
  <script src="nprogress.js"></script>
  <link rel="stylesheet" type="text/css" media="all"nprogress.css" />
  NProgress.done();

Drugą funkcję zaraz przed zamknięciem znacznika body.

<script lang="JavaScript">
  NProgress.done();
</script>
</body>
</html>

Krok czwarty, ostatni to dopasowanie wyglądu paska do kolorów strony. Sprowadza się to tak na prawdę do zmiany jednej linijki w pliku nprogress.css domyślnie w 8 linii znajduje się reguła css odpowiadająca za kolor tła (czyli kolor paska)

  background: #29d;

Zmieniając wartość #29d na dowolną (red, blue, gray, pink, etc lub #000, #ccc, #ff0000) zmienisz kolor paska ładowania.

Więcej opcji konfiguracyjnych (nie wymaganych do podstawowego działania biblioteki) znajduje się na stronie github.com/rstacruz/nprogress.

Jak wspomniałem na początku. Demo dostępne jest po przeładowaniu strony :)

  • http://playmods.blogspot.com/ Matpila

    Dzięki :)

    • http://www.kmike.net/ Michał Baran

      Spektakularny moment! Pierwszy komentarz na blogu. Ciesze się, że się przydało :)