Learn Progress bar

When a request takes longer than 400 ms, Unpoly shows a thin progress bar at the top edge of the screen. This mimics the loading indicator that browsers show during full page loads.

The progress bar requires no setup. You can style it, control when it appears, disable it or replace it with a custom loading indicator.

The progress bar is a global indicator and does not point at the fragment being updated. To show loading state within a fragment, see Loading state.

Styling the progress bar

The progress bar is implemented as a single <up-progress-bar> element. Unpoly automatically inserts the element when requests are late, and removes it when they have recovered.

By default the bar is 3 pixels high and blue. You may style the element using CSS:

up-progress-bar {
  height: 5px;
  background-color: red;
}

Controlling when the progress bar appears

Unpoly shows the progress bar when a request takes longer to respond than up.network.config.lateDelay. The default is 400 milliseconds:

up.network.config.lateDelay = 1000

You may override this per request by setting an [up-late-delay] attribute or passing a { lateDelay } option. Passing { lateDelay: false } never shows a progress bar for that request:

<a href="/report" up-follow up-late-delay="false">Generate report</a> <!-- mark: up-late-delay="false" -->

Requests that are loading in the background never show the progress bar. See Background requests.

Disabling the progress bar

The progress bar can be disabled entirely:

up.network.config.progressBar = false

Custom loading indicators

If you don't like the default progress bar, you can observe the up:network:late and up:network:recover events to implement a custom loading indicator that appears during long-running requests.

To build a custom loading indicator, place an element like this in your application layout:

<loading-indicator>Please wait!</loading-indicator>

Now add a compiler that hides the <loading-indicator> element while there are no long-running requests:

// Disable the default progress bar
up.network.config.progressBar = false

up.compiler('loading-indicator', function(indicator) {
  function show() { up.element.show(indicator) }
  function hide() { up.element.hide(indicator) }

  hide()

  return [
    up.on('up:network:late', show), // mark: up:network:late
    up.on('up:network:recover', hide) // mark: up:network:recover
  ]
})

The compiler returns the functions that unbind the event listeners, so the listeners are removed when the indicator element is destroyed.