Customizing the progress bar

The progress bar is a fake progress bar, just there to give your users a sense that something is happening.

In the future, it should be possible to make the bar show real progress (by looking at the server’s Content-Length header).

The bar is displayed even if the page has been loaded instantly, in the future this will change. Discussion on GitHub.

When the visitor zooms on the page or rotates his device, the bar’s size and position automatically adjust, so it works even if your site isn’t optimized for mobile.

By default, the progress bar’s color is #29d, you can change that with CSS:

1 2 3 
#instantclick-bar {
  background: white;
}

You may also make the bar go away:

1 2 3 
#instantclick {
  display: none;
}

The way to make the bar go away isn’t optimal. In a later version of InstantClick it will be possible not to have it run by passing an argument to InstantClick.init.

Documentation table of contents

Getting started

  • 1. Get started
  • 2. How InstantClick works
  • 3. Preloading
  • 4. Blacklisting
  • 5. Events and script re-evaluation

    • Go further

  • 1. Tracking assets changes
  • 2. Customizing the progress bar

    • Meta

  • 1. Roadmap
  • 2. Changelog