0

I think this question was asked in a similar form before but I didn't get a clear understanding how to implement it properly.

I have a site, which has different pages on their own urls, like '/contact', '/about', '/products'.

What's the technique to put a top bar on the top like this one http://nanobar.jacoborus.codes/?

Here is what I need:

  1. User clicks a link on the page.
  2. JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
  3. Browser starts loading the page. At this moment, page clears and becomes white and blank.
  4. As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was.

So, I can technically run some function on every page, like showGrowingProgressBar(value), but since I don't know where it left, I cannot put it in the same progress state as where it left.

How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?

Sergei Basharov
  • 51,276
  • 73
  • 200
  • 335
  • Possible duplicate of [How to show a running progress bar while page is loading](http://stackoverflow.com/questions/18981909/how-to-show-a-running-progress-bar-while-page-is-loading) – silentw Feb 14 '17 at 12:18
  • 1
    _“How do I make it look natural, like the user didn't leave the page, but more like an SPA experience?”_ – by using AJAX to load the content, obviously. – CBroe Feb 14 '17 at 12:18
  • It needs to be an SPA to do this. Your description of how browser works when loading a new window (page) is flawed – charlietfl Feb 14 '17 at 12:20

3 Answers3

0

I guess you want to build an one page web application where things load in the same page without refreshing. You can use AJAX to do this. you can populate a particular div with the new html without refreshing. It can be handled more easily using Angular JS. You can define routes for every page and can also have templates for different page, and can load that template when user clicks on the link. It will just replace the container div with new html codes and you can also handle the urls easily.

Gagan Prajapati
  • 140
  • 7
0

Turbolinks seems to be what you are looking for. It dynamically loads your pages and shows a loading indicator.

Turbolinks makes navigating your web application faster. Get the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. Use HTML to render your views on the server side and link to pages as usual. When you follow a link, Turbolinks automatically fetches the page, swaps in its , and merges its , all without incurring the cost of a full page load.

str
  • 42,689
  • 17
  • 109
  • 127
0

Your approach is:

  1. User clicks a link on the page.
  2. JavaScript handles the click, shows the progress bar, starts growing it then passes the event to browser.
  3. Browser starts loading the page. At this moment, page clears and becomes white and blank.
  4. As the progress bar was in some position that is not zero, say, 63%, and now there is no information on the new page about where it was

Your approach should be:

  1. User clicks a link on the page.
  2. JavaScript handles the click, browser starts loading the page. At this moment, page clears and becomes white and blank.
  3. New page shows the progress bar, starts growing it then passes the event to browser. The growth can be picturized by the no. of API call completed divided by total no. of api calls, required for that page.
Shubhansh Sahai
  • 34
  • 7