Jak uzyskać efekt wczytywania (progress-bar) strony ?

Witam,

rozwijając pytanie w temacie wątku - zastanawiam się jak techniczne uzyskać efekt wczytywania strony, tak jak jest to pokazane na załączonym zdjęciu (przykład z Heroku - po kliknięciu w menu z podstrony notification na account settings ukazuje się 'pasek' wczytywania pozostałych danych).

.

Próbowałem prześledzić jak działa ten kod w przeglądarce, ale ostatecznie nie bardzo mi to wyszło..

Udało mi się ustalić, że taki progress-bar podczas ładowania strony można uzyskać tylko wtedy, gdy wykonujemy request używając AJAX'a, tak? Wtedy teoretycznie przypadek pokazany na zdjęciu mógłby być zrealizowany tak, że po kliknięciu w link pokazywany jest progress-bar do czasu zakończenia requesta ($.ajax.complete() dla jquery).

Ale z tego, co widzę, to adres w przeglądarce najpierw zmiany jest na nową podstronę. Więc o ile dobrze myślę, najpierw 'normalnie' wykonywany jest request GET po kliknięciu na link, a następnie np. już pod nowym adresem, np. na zdarzenie$( window ).on("load", function(){ ... }) wykonywany jest request przy pomocu AJAX'u, aby wgrać resztę strony i aby móc pokazać między innymi progress-bar?

pzdr,
M

https://kimmobrunfeldt.github.io/progressbar.js/

@czysteskarpety - a wyjaśnisz mi słownie (odnosząc się do tego, co napisałem w pierwszym poście), jak działa ten progressbar podany przez Ciebie ?

to prosty progressbar w js, nie wiem co tam mam wytłumaczyć

tutaj ci na szybko zmieniłem
https://jsfiddle.net/rfny4ftb/962/

tam nacisnij tej trójkącik z napisem run w rogu albo zmień wartości i naciśnij update z takim ołóweczkiem
resztę musisz dostosować wartościami js/css i dodać do swojej stronki

@czysteskarpety: - Akurat z wdrożeniem tego w taki sposób jak opisałeś to sobie poradziłem już wcześniej (akurat z jakimś innym progresbar'em znalezionym w sieci). Problem jaki rozważam jest taki, że ten progresbar działa mi niewłaściwie, tzn. jestem na stronie głównej i przechodzę na podstronę /jakas-podstrona przy pomocy 'zwykłego' kliknięcia na url (tag a), to progresbar w rzeczywistości pojawia się dopiero po otrzymaniu odpowiedzi od serwera, więc de facto ten progresbar pokazuje się tylko na czas renderowania html'a przez przeglądarkę.. co jest praktycznie bez sensu..

Może źle coś robię.. Ale większy sens progresbar'a zauważam dopiero, gdy użyję AJAX'a do przejścia na podstronę. Wtedy wydaje się to działać poprawniej.

Jednakże cały wątek jest pytaniem w delikatnie innym kontekście - jak uzyskać efekt użycia progresbar'a przedstawionego na zdjęciu w pierwszym poście, tzn. po przejściu z zakładki Notification na zakładkę Account, w serwisie Heroku, top strony nie jest wczytywany, tylko wczytywane są dane użytkownika. Z tym, że adres url w przeglądarce zmienia się z /notification na /account-settings. Jak taka realizacja może wyglądać od strony kodu/pseudo-kodu?

albo zrób w jakimś backendzie header i footer, a treść przeładowuj ajaxem łącznie z progresbar'em

@czysteskarpety: - ok, dzięki za wypowiedzi. To w zasadzie jedyne sensowne rozwiązanie, które mi przychodziło do głowy od początku.. szukałem czegoś bardziej wyrafinowanego patrząc na przykład Heroku, ale może niepotrzebnie..